Question

我的问题是这样的：我似乎无法在左侧添加hamburguer按钮（以切换抽屉），而且我也无法根据屏幕将标题添加到抽屉（例如，显示“在登录屏幕上时，标题上的“登录”）。

代码简要说明：

AppNavigation.js处理该应用程序的所有导航。包括两个抽屉（LoggedDrawer和UnloggedDrawer）。

它们在堆栈导航器（RootNavigator中，RootNavigator在容器内部（react-navigation 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' })] }
    ))
  }
}

在我的屏幕上，我对所有这些都有一个navigationOptions（唯一的区别是图标），这只是代码的一部分，仅作为示例：

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

所以，回答我自己的问题。使用 react-native-elements 可以轻松实现我想要的功能。

它们有一个名为“标题”的组件，您可以在每个屏幕上使用该组件来自定义标题。

我将此添加到了抽屉导航器和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>

留下答案，以防其他人遇到相同的问题。

createStackNavigator中的CreateDrawerNavigator

1 个答案: