Header 组件不会改变 React Native答案

【问题标题】：Header component not change React nativeHeader 组件不会改变 React Native
【发布时间】：2018-06-19 05:37:11
【问题描述】：

我遇到了header component 不变的问题。即使我在StacknavigatornavigationOptions 中单独定义了，在所有屏幕上都是一样的。

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

          );

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

【问题讨论】：

标签： reactjs react-native react-native-android stack-navigator

【解决方案1】：

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

【讨论】：

感谢您的回复，如果您可以为react-native-elements 提供解决方案，这将有助于而不是更改库
它是一个用于向 react-navigation 添加标头的库。它与 react-native-elements 不同。
您可以使用Header from react-native-elements 和react-navigation-utils。
我知道，但我想使用 react-native-elements 库而不是另一个

【解决方案2】：

试试这个

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

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

希望对你有帮助....

【讨论】：