CreateDrawerNavigator внутри createStackNavigator

Question

Моя проблема заключается в следующем: я не могу добавить кнопку гамбургера слева (для переключения ящика), а также не могу добавить заголовок в ящик в зависимости от экрана (например, показать 'Войти в заголовок, когда он находится на экране входа).

Краткое объяснение кода:

AppNavigation.js обрабатывает всю навигацию для приложения.Включая два выдвижных ящика (LoggedDrawer и UnloggedDrawer).

Они внутри стекового навигатора (RootNavigator), а RootNavigator внутри контейнера (реагирование-навигация 3.0).

У меня есть такой код:

AppNavigation.js

const UnloggedDrawer = createDrawerNavigator(
  {
    Home: { screen: HomeScreen },
    Login: { screen: LoginScreen },
    SignUp: { screen: SignUpScreen }
  }, { 
  drawerWidth: SCREEN_WIDTH * 0.6 
  }
)

const LoggedDrawer = createDrawerNavigator(
  {
    Home: { screen: HomeScreen },
    Profile: { screen: ProfileScreen }
  }, {
  contentComponent: (props) => (
    <View style={{ flex: 1 }}>
      <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
        <DrawerItems {...props} />
        <Button
          color='red'
          title='Logout'
          onPress={() => { props.screenProps.logoutCurrentUser(props) }}
        />
      </SafeAreaView>
    </View>
  ),
  drawerWidth: SCREEN_WIDTH * 0.6,
})

const RootNavigator = createStackNavigator({
  Init: {
    screen: Init,
    navigationOptions: {
      header: null,
    },
  },
  UnloggedDrawer: { screen: UnloggedDrawer },
  LoggedDrawer: { screen: LoggedDrawer }
},
{
  mode: 'modal',
  title: 'Main',
  initialRouteName: 'Init',
  transitionConfig: noTransitionConfig,
})

Init.js

componentWillReceiveProps(props) {
  const { navigation } = props;
  if (props.userReducer.isSignedUp) {
    navigation.dispatch(StackActions.reset(
      { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'LoggedDrawer' })] }
    ))
  } else {
    navigation.dispatch(StackActions.reset(
      { index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'UnloggedDrawer' })] }
    ))
  }
}

На моих экранах у меня есть навигация для всех из нихточно так же, как это (единственное отличие - значок), это только часть кода в качестве примера:

export default class HomeScreen extends Component {
  static navigationOptions = {
  headerTitle: 'Home',
  drawerIcon: () => (
    <SimpleIcon
      name="home"
      color="rgba(110, 120, 170, 1)"
      size={20}
    />
  )};
}

Итак, я хочу сделать следующее:

1. Добавьте значок гамбургера в заголовок всех экранов, который будет использоваться для переключения ящика

2. Добавьте заголовок в середине заголовка (также для всехэкраны)

То, что я пробовал:

• Все, что я мог найти в интернете и ничего не работает.

Кроме того, если моя архитектуранеправильно, пожалуйста, отметьте, что если есть и другой способ добиться того, что я пытаюсь сделать, то это тоже принято.

Заранее спасибо.Пожалуйста, помогите.

Answer 1

Итак, отвечая на мой собственный вопрос.То, что я хочу, легко достигается с помощью response-native-elements .

У них есть компонент под названием «Заголовок», который вы можете использовать на каждом экране для настройки заголовка.

Я добавил это и к hookNavigators, и к stackNavigator.

headerMode: 'null'

Затем для каждого экрана мне нужно было обернуть JSX-код в React.Fragment , поэтому все выглядело так:

<React.Fragment>
  <Header
    statusBarProps={{ barStyle: 'light-content' }}
    barStyle="light-content"
    leftComponent={
      <SimpleIcon
        name="menu"
        color="#34495e"
        size={20}
      />
    }
    centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
    containerStyle={{
      backgroundColor: 'white',
      justifyContent: 'space-around',
    }}
  />
</React.Fragment>

Оставив ответ на тот случай, если у кого-то еще возникнет такая же проблема.