this.props.navigation.goBack（）未在createMaterialTopTabNavigator中触发React Native React Navigation

Question

我有一个toptabnavigator（我用来在屏幕底部放置标签），当我调用this.props.navigation.goBack（）时，我有一个屏幕无效。这是我从屏幕上调用的代码：

<TouchableOpacity style={styles.closeLine} onPress={() => {this.props.navigation.goBack()}}>
      <Icon.Ionicons size={30} style={{ color: '#fff', fontWeight: 'bold' }} name={Platform.OS === 'ios' ? `ios-close` : 'md-close'} />
      <Text style={styles.closeText}>Close</Text>
</TouchableOpacity>

这是tabnavigator的代码：

// Bottom tab compilation
export default createMaterialTopTabNavigator({
  DashboardStack,
  StatusStack,
  ReferralStack,
  MoreStack,
},
tabConfigs
);

const tabConfigs = {
  tabBarPosition: 'bottom',
  tabBarOptions: {
    inactiveTintColor: '#364652',
    activeTintColor: '#ff6900',
    activeBackgroundColor: '#ff6900',
    indicatorStyle: {
      display: 'none',
    },
    showIcon: true,
    tabStyle: {
      width: '100%',
    },
    labelStyle: {
      fontSize: 11,
      fontWeight: 'bold',
      marginBottom: 5
    },
    indicatorStyle: {
      backgroundColor: 'transparent',
    },
    style: {
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      height: 55,
      width: '100%',
      borderTopWidth: 0,
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      marginBottom: isIphoneX() ? 30 : 0,
      shadowColor: "#000",
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.22,
      shadowRadius: 2.22,
    },
  }
};

它正在发生的屏幕是MoreScreen，所以这里是MoreStack的代码：

const MoreStack = createStackNavigator({
  More: MoreScreen,
  Monitor: MonitorScreen,
  Settings: SettingsScreen, 
  EditEmail: EditEmailScreen,
  EditPhoneNumber: EditPhoneScreen,
  EditPassword: EditPasswordScreen,
},{
  headerMode: shineHeaderMode,
  headerLayoutPreset: 'center',
  headerBackTitleVisible: false,
  headerTransparent: true,
  mode: 'modal',
    navigationOptions: {
      title: "Menu",
      headerTransparent: true,
      headerTitleStyle: {
        color: '#425563',
      },
    headerStyle: shineHeaderStyle,
    }

});

MoreStack.navigationOptions = {
  tabBarVisible: false,
  tabBarLabel: 'More',
    tabBarIcon: ({focused }) => (
      <TabBarIcon source={focused ? require('../assets/icons/more.png') : require('../assets/icons/inactive-more.png')}/>
    ),
  mode: 'modal',
};

出于某种原因，当我调用this.props.navigation.goBack（）时根本没有任何事情发生。

我尝试过的： 我试过传递null，这只是带我到仪表板堆栈的第一个屏幕。

我已经尝试将它放在类中的一个不同的函数中（称为more_back（））并在该函数中调用this.props.navigation.goBack（）并在onPress方法中调用this.more_back（），并且没有也工作（意味着什么都没有发生在TouchableOpacity的新闻）。

我控制台注销了它实际上正在捕捉“紧迫”事件。

我试过调用this.props.navigation.actions.goBack（）没有结果差异。

当我按下那个toucbleopacity时，我怎么能这样做，它会把我带回到我以前的屏幕上？

Answer 1

您应该根据react-navigation v3中的文档将createMaterialTopTabNavigator包装在createAppContainer中。你可以在这里查看官方文档tab navigation。

export default createAppContainer(createMaterialTopTabNavigator({
...your routes...
}));