0

ヘッダー コンポーネントが変更されないという問題に直面しています。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',
            }
          }

          );

この問題に対処する可能性のある修正を提案できますか?

4

2 に答える 2