react-native - React 原生应用结构

Question

1 Stack navigator:    
   1.1 Tabnavigator:
      1.1.1 Stack navigator:
         1.1.1.1 page one
      1.1.2 Stack navigator:
         1.1.2.1 page two
      1.1.3 Stack navigator:
         1.1.3.1 page three    
   1.2 page 4

这是我决定实施的结构。我有几个问题还没有解决。我希望根堆栈导航器标题显示徽标和后退按钮以防万一，并控制整个应用程序状态。当我设置自定义标题时，我不知道如何告诉后退按钮隐藏或显示。我从根堆栈导航器的 navigationOptions 设置自定义标题。

请问有什么帮助吗？

Answer 1

您可以根据需要在每个屏幕（组件）上定义 navigationOptions，这种方式对于您想要做的事情更加灵活。这是一个给你的例子，请注意我在哪里重新定义headerLeft了EventInfo屏幕，你可以隐藏或显示headerLeft任何你想要的：

    ...
        class EventInfo extends PureComponent {

          // Set the navigation options for `react-navigation`
          static navigationOptions = ({navigation}) => {
            return {
              headerRight: <Icon style={{marginRight:10,color:'white'}} name="menu" size={32} onPress={() => {navigation.dispatch(DrawerActions.openDrawer())}}/>,
              headerTitle: <Text style={{flex:1,textAlign:'center',fontSize:18,color:'white',fontWeight:'bold'}}>{I18N.t('events.infoEventTitle')}</Text>,
              headerLeft: <Icon2 style={{color:'white', marginLeft:10, width:40}} name="ios-arrow-back" size={32} onPress={() => {navigation.navigate('Events')}}/>,
            }
          };
    ...