时间戳

首页 > 解决方案 > React Native 将参数传递给 Navigator

javascript - React Native 将参数传递给 Navigator

问题描述

我有一个选项卡导航器，我想知道是否可以将参数传递给选项卡导航器并在 HomePage 组件中使用该参数。

我正在使用从抽屉导航器传递参数this.props.navigation.navigate('TabsNav', {testParam: 'TEST'})。

是否可以像这样将参数传递给导航器？

TabNav.js

export const Tabs = createMaterialTopTabNavigator(
  {
    HomePage: {
      screen: Home,
      navigationOptions: {
        tabBarLabel:"Home Page",
      },
    },
    ListView: {
      screen: List,
      navigationOptions: {
        tabBarLabel:"List View",
      }
    },
  },

  {
    order: ['HomePage', 'ListView'],
  },
)

DrawerContainer.js

  render() {
    return (
      <View style={styles.container}>

        <View>
          <TouchableHighlight
            style={styles.TouchableHighlight}
            onPress={this.props.navigation.navigate('TabsNav', {testParam: 'TEST'})}

            <Text>Home</Text>
          </TouchableHighlight>
        </View>

        <View>
          <TouchableHighlight
            style={styles.TouchableHighlight}
            onPress={this.props.navigation.navigate('ProfilePage')}>

            <Text>List View</Text>
          </TouchableHighlight>
        </View>


      </View>
    )
  }

标签： javascriptreactjsreact-native

解决方案

您需要导航到选项卡内的特定屏幕，而不是选项卡本身，或者参数进入选项卡导航器。params 仅转到您直接导航到的路线。

所以

Drawer({
  TabsNav: Tab({
    HomePage: ScreenA,
    ListView: ScreenB,  
  })
});

导航到 HomePage 或 ListView 而不是 TabsNav

推荐阅读