React Navigation v3 Modal不适用于createBottomTabNavigator

Question

React Navigation v3 Modal不能与createBottomTabNavigator一起使用，也不确定原因。然而，headerMode: 'none'似乎工作，但mode: 'modal'没有出现作为模态。

const Addpicture = createStackNavigator(
  {
    Addpicture: {
      screen: Addpicture
    }
  },
  {
    mode: 'modal', // This does NOT work
    headerMode: 'none' // But this works
  }
);

const Navigator =  createBottomTabNavigator(
  {
    'My Interviews': {
      screen: MyDatesStack
    },
    'Add Interview': {
      screen: AddDateStack
    },
    'Companies': {
      screen: CompaniesStack
    }
  }
);

export default createAppContainer(Navigator);

Answer 1

事实上，无论我尝试什么，它都行不通。

我通过以下步骤解决了这个问题。假设您想在按下NewModal选项卡时打开模态。

1. 通过包含选项卡堆栈和打开模态导航堆栈来设置您的应用程序容器：

  const FinalTabsStack = createStackNavigator(
    {
      Home: TabNavigator,
      NewModal: NewModalNavigator
    }, {
      mode: 'modal',
    }
  )

2. 根据this指南创建具有该选项卡堆栈的应用程序容器
3. 在TabNavigator中的createBottomTabNavigator内部返回特定选项卡（NewModal）的null组件（通过react-navigator关闭导航）

  const TabNavigator = createBottomTabNavigator({
    Feed: FeedNavigator,
    Search: SearchNavigator,
    NewModal: () => null,
    Chat: ChatNavigator,
    MyAccount: MyAccountNavigator,
}
    defaultNavigationOptions: ({ navigation }) => ({
      mode: 'modal',
      header: null,
      tabBarIcon: ({ focused }) => {
        const { routeName } = navigation.state;
        if (routeName === 'NewModal') {
          return <NewModalTab isFocused={focused} />;
        }
      },
    }),

4. 使用TouchableWithoutFeedback＆onPress在自定义选项卡组件NewModalTab内手动单击。在NewModalTab组件内：

  <TouchableWithoutFeedback onPress={this.onPress}>
    <Your custom tab component here />
  </TouchableWithoutFeedback>

5. 一旦你赶上onPress dispatch redux事件

  onPress = () => {
    this.props.dispatch({ type: 'NAVIGATION_NAVIGATE', payload: {
      key: 'NewModalNavigator',
      routeName: 'NewSelfieNavigator',
    }})
  }

6. 使用Navigation Service处理调度事件。我正在使用redux-saga

  NavigationService.navigate(action.payload);

有点复杂，但有效。