时间戳

首页 > 解决方案 > 子屏幕中的 React-Native 导航？

reactjs - 子屏幕中的 React-Native 导航？

问题描述

如何在子屏幕中使用导航？

我在 App.js 中创建导航。然后为每个屏幕创建堆栈导航器（在本例中为 FindGroupScreen）。在 FindGroupScreen.js 中，我创建了一个子屏幕 (TravelListDetail)，我想在其中使用导航。在 FindGroupScreen 中时，我通常只使用

this.props.navigation.navigate('Chat');

导航到另一个屏幕。但这在子屏幕（TravelListDetail）中不起作用。我应该怎么做才能使导航在子屏幕中工作？

应用程序.js：

imports ...

const FindGroupStack = createStackNavigator({
    FindGroup: FindGroupScreen,
},
{ headerMode: 'none', }
);

// ...stacks

const MainBottomTab = createBottomTabNavigator(
{
    Home: HomeStack,
    FindGroup: FindGroupStack,
    Trip: TripStack,
    Chat: ChatStack,
    Menu: MenuStack,
},
{
navigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ focused, tintColor }) => {
    const { routeName } = navigation.state;
    let iconName;
    if (routeName === 'Home') {
      //iconName = `facebook${focused ? '' : '-outline'}`;
      iconName = `home`;
    } else if (routeName === 'FindGroup') {
      iconName = `map-marked-alt`;
    } else if (routeName === 'Trip') {
      iconName = `map-marker-alt`;
    } else if (routeName === 'Chat') {
      iconName = `comments`;
    } else if (routeName === 'Menu') {
      iconName = `bars`;
    }
    //return <Ionicons name={iconName} size={25} color={tintColor} />;
    return <Icon name={iconName} size={20} color={tintColor} />;
  },
}),
tabBarOptions: {
  activeTintColor: '#f0ca6d',
  inactiveTintColor: '#ffffff',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: '#303030',
  },
},
}
);

export default createSwitchNavigator(
{
    AuthLoading: AuthLoadingScreen,
    App: MainBottomTab,
    Auth: AuthStack,
},
{
    initialRouteName: 'AuthLoading',
}
);

查找组屏幕：

imports ...
import TravelListDetail from '../Detail/TravelListDetail';

class FindGroupScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedItem: null,
      phase: 'phase-0',
    };
  }

  renderPage() {
    const { selectedItem, position, detailItem, phase } = this.state;

    return (
      <View style={{ flex: 1, backgroundColor: '#606060' }}>
        <List
          selectedItem={selectedItem}
          onItemPress={this.onItemPressed}
          phase={phase}
        />
        <TravelListDetail
          phase={phase}
          selectedItem={selectedItem}
          onBackPress={this.onBackPressed}
          onSharedElementMovedToDestination={
            this.onSharedElementMovedToDestination
          }
          onSharedElementMovedToSource={this.onSharedElementMovedToSource}
        />
      </View>
    );
  }
  render() {
    const {
      phase,
    } = this.state;

    return (
      <SharedElementRenderer>
        <View style={styles.container}>
          <ToolbarBackground
            isHidden={phase !== 'phase-1' && phase !== 'phase-2'}
          />
          {this.renderPage()}
        </View>
      </SharedElementRenderer>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default FindGroupScreen;

旅游清单详情：

      <View style={styles2.viewCenter}>
        <TouchableOpacity
            style={styles2.buttonStyle}
            activeOpacity = { .5 }
            onPress={ this.gotoChatScreen }
        >
          <Text style={styles2.buttonTextStyle}> Share Travel </Text>
        </TouchableOpacity>
      </View>

标签： reactjsreact-nativereact-navigation

解决方案

将其作为道具传递给子屏幕。

<TravelListDetail
          navigation={this.props.navigation}
          phase={phase}
          selectedItem={selectedItem}
          onBackPress={this.onBackPressed}
          onSharedElementMovedToDestination={
            this.onSharedElementMovedToDestination
          }
          onSharedElementMovedToSource={this.onSharedElementMovedToSource}
        />

然后，在孩子身上，你写：

props.navigation.navigate('Welcome')

this.（如果它是类组件，则带有前缀）。

推荐阅读