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')}}/>,
            }
          };
    ...

反应本机应用程序结构

1 个答案: