代码之家  ›  专栏  ›  技术社区  ›  Augusto Samamé Barrientos

反应导航器通过导航选项道具

  •  0
  • Augusto Samamé Barrientos  · 技术社区  · 6 年前

    我已经使用React Navigator 3.0设置了导航 为了成功地从父组件传递属性,我这样调用TabNavigator:

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

    然后,我的TabNavigator组件呈现几个屏幕。我以前的方法是使用文档中的默认代码(如下所示用于主屏幕),但现在由于我要传递props,所以我需要使用下面所示的方法来显示profilescreen(arrow函数)。

    我的问题是,在使用arrow函数时,我不知道在哪里放置profilescreen的导航选项。

    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 回复  |  直到 6 年前
        1
  •  0
  •   Augusto Samamé Barrientos    6 年前

    这是正确的语法:

    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 }}
          />
        ),