1

我的问题是：我似乎无法在左侧添加汉堡包按钮（切换抽屉），而且我无法根据屏幕向抽屉添加标题（例如，显示“登录”登录屏幕上的标题）。

代码简要说明：

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

它们位于堆栈导航器 ( RootNavigator) 内，并且RootNavigator位于容器内 (react-navigation 3.0)。

这是我的代码：

应用导航.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,
})

初始化.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.在标题中间添加标题（也适用于所有屏幕）

我试过的：

  • 我在互联网上可以找到的所有东西似乎都没有用。

另外，如果我的架构是错误的，请指出，如果也有不同的方式来实现我想要做的事情，它也被接受。

提前致谢。请帮忙。

4

1 回答 1

2

所以，回答我自己的问题。我想要的很容易通过使用react-native-elements来实现。

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

我将它添加到了drawerNavigators 和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>

留下答案，以防其他人有同样的问题。

于 2018-12-18T14:52:55.607 回答