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

事实上，

无论我尝试什么，它都不起作用。

我按照以下步骤解决了这个问题。假设您想在按下"新模式"选项卡时打开模式。

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

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

2. 根据本指南使用该选项卡堆栈创建应用容器

3. 在TabNavigator内createBottomTabNavigator返回特定选项卡（NewModal）的空组件（通过反应导航器关闭导航）

  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. 在自定义选项卡组件中手动处理点击，NewModalTab使用TouchableWithoutFeedback和onPress。在NewModalTab组件中：

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

5. 一旦你赶上新闻调度 redux 事件

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

6. 使用导航服务处理调度事件。我正在使用redux-saga

  NavigationService.navigate(action.payload);

有点复杂，但有效。