React Navigator通过NavigationOptions道具

时间:2018-12-06 12:43:50

标签: react-native react-navigation

我已经使用React Navigator 3.0设置了Navigation 为了成功地从父组件传递道具,我这样调用我的TabNavigator:

return (
        <View style={styles.container}>
          <TabNavigator screenProps={{deleteToken: this.deleteJWT }} />
        </View>
      );

然后,我的TabNavigator组件呈现几个屏幕。我以前的方法是使用文档中的默认代码(如下面的HomeScreen所示),但是现在,因为我要传递道具,所以我需要将以下所示的方法用于ProfileScreen(箭头功能)。

我的问题是,使用箭头功能时,我不知道将ProfileScreen的navigationOptions放在哪里。

const TabNavigator = createBottomTabNavigator(
  {
  Profile: (props) => {
    return <ProfileScreen {...props.screenProps} />;
  },
  Home: { screen: HomeScreen,
          navigationOptions: {
            //tabBarLabel: 'Inicio',
            tabBarIcon: ({ tintColor, focused }) => (
          <Ionicons
            name={focused ? 'ios-home' : 'ios-home'}
            size={26}
            style={{ color: tintColor }}
          />
        ),
          //  tabBarIcon: () => {
          //                <Image
          //                style={{ width: 50, height: 50 }}
          //                source={{ uri: 'https://facebook.github.io/react/img/logo_og.png' }}
          //                />
        //},
        }
      },

更新:最明显的地方是将NavigationOptions对象放在要返回的屏幕中,但它会被忽略:

export default class ProfileScreen extends React.Component {
  static navigationOptions = {

        tabBarLabel: 'Perfil',
        tabBarIcon: ({ tintColor, focused }) => (
      <Ionicons
        name={focused ? 'ios-person' : 'ios-person'} //TODO change to focused icon
        size={26}
        style={{ color: tintColor }}
      />
    )
  }

1 个答案:

答案 0 :(得分:0)

这是正确的语法:

const TabNavigator = createBottomTabNavigator(
  {
  Profile: {
    screen: props => <ProfileScreen {...props.screenProps} />,
    navigationOptions: {
        //tabBarLabel: 'Perfil',
        tabBarIcon: ({ tintColor, focused }) => (
      <Ionicons
        name={focused ? 'ios-person' : 'ios-person'} //TODO change to focused icon
        size={26}
        style={{ color: tintColor }}
      />
    ),