0

我面临一个标题组件不会改变的问题。即使我在Stacknavigator导航选项中单独定义,它在所有屏幕上都是相同的。

<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',
            }
          }

          );

您能否提出解决此问题的可能解决方案?

4

2 回答 2

0

尝试这个

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

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

希望它会帮助你....

于 2018-02-21T06:52:54.307 回答
0

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

于 2018-01-10T07:25:06.607 回答