Question

我正面临header component不会改变的问题。即使我在Stacknavigator navigationOptions中单独定义，它在所有屏幕上也是一样的。

<Header
  leftComponent={{ icon: 'menu', color: '#fff' }}
  centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
  rightComponent={{ icon: 'home', color: '#fff' }}
/>

即使我已在每个屏幕中单独添加，但它显示为附加的主页（第一个标题组件）。

我也在每个屏幕上覆盖导航选项，但同样的标题问题。

static navigationOptions = ({ navigation, screenProps }) => ({
   title: 'User List',
   headerTitle:'User List',
   headerTintColor :'#ffffff',
 });

以下是我的完整代码

const AppNavigator = StackNavigator({
              Login: {
                screen: LoginScreen,
                navigationOptions: {
                  header: null,
                  headerMode: 'none'
                }
              },

              Home: {
                screen: AppDrawerNavigation,
                navigationOptions: ({
                  navigation
                }) => ({
                  header: < Header
                  outerContainerStyles={{ backgroundColor: '#1999CE' }}
                  leftComponent = {                                
                   <Icon name='menu'  color='#ffffff' onPress={() => navigation.navigate('DrawerToggle')}/>
                 }
                  centerComponent = {
                                  {
                                      text: 'Home',
                                      style: {
                                          color: '#fff'
                                      }
                                  }
                              }
                rightComponent = {
                  {
                    icon: 'home',
                    color: '#fff'
                  }
                }
                />,

              }),
      },


      WebViews: {
        screen: AppDrawerNavigation,
        navigationOptions: {
          header: null,
          headerMode: 'none'
        }
      },


      Profile: {
        screen: ProfileScreen,
        navigationOptions: {
          headerStyle: {
            backgroundColor: '#1999CE',
          }, 
        }
      },
      UserList :{
        screen:AppDrawerNavigation,

        navigationOptions: ({
          navigation
        }) => ({

          title: 'List User',
          headerTitle:'List User',
          header: < Header
          outerContainerStyles={{ backgroundColor: '#1999CE' }}
          leftComponent = {                                
           <Icon name='menu'  color='#ffffff' onPress={() => navigation.navigate('DrawerToggle')}/>

         }
         centerComponent = {
          {
            text: 'List User',
            style: {
              color: '#fff'
            }
          }
        }
        rightComponent = {
          {
            icon: 'home',
            color: '#fff'
          }
        }
        />,

      }),
      }
    },
    {         navigationOptions: {
              headerMode: 'screen'
            },

    }
    );

const AppDrawerNavigation = DrawerNavigator({

              Home: {
                screen: HomeScreen,


              },

              WebViews: {
                screen: WebViewScreen,
              },
              UserList: {
                screen: UserListScreen,

              },
            },
            {
             navigationOptions: {
              headerMode: 'none'
            },
            drawerPosition: 'left',
            drawerWidth: 200,
            contentOptions: {
              activeTintColor: '#000000',
              activeTintColor :'#ffffff',
              activeBackgroundColor :'#1999CE',
              inactiveTintColor :'#1999CE',
              inactiveBackgroundColor :'#ffffff',
            }
          }

          );

你能否提出一个解决这个问题的可能解决方案？

Answer 1

您可以使用此程序包react-navigation-utils中的withHeaders为每个屏幕制作自定义标题。

Answer 2

试试这个

    Home: {
            screen: HomeScreen,
           navigationOptions: {
              title:'Home',}
          },

          WebViews: {
            screen: WebViewScreen,
            navigationOptions: {
               title:'Web Views',}
          },
          UserList: {
            screen: UserListScreen,
            navigationOptions: {
            title:'User List',}
          },

希望它能帮助你......

标头组件不会更改React native

2 个答案: