this.props.navigation.goBack () не запускается в собственной навигационной реакции createMaterialTopTabNavigator React

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>

Вот код для табнавигатора:

// 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, что просто приводит меня к первому экрану в стеке Dashboard.

Я попытался поместить его в другую функцию в классе (называемую more_back ()) и вызвать this.props.navigation.goBack () в этой функции и вызвать this.more_back () в методе onPress, и это тоже не сработало (то есть ничего не произошло при нажатии TouchableOpacity).

Я отключился от консоли, что она на самом деле перехватывает «нажатие» события.

Я пытался вызвать this.props.navigation.actions.goBack () без разницы в результатах.

Как я могу сделать так, чтобы при нажатии этой сенсорной емкости, я возвращался к экрану, на котором был ранее?

Answer 1

Вы должны обернуть ваш createMaterialTopTabNavigator в createAppContainer согласно документации в response-navigation v3. Вы можете оформить официальные документы здесь вкладка навигации .

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