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标签时打开模式。

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

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

使用this指南中的标签堆栈创建应用容器
在TabNavigator的{{1}}内部，返回特定标签（NewModal）的空组件（以关闭react-navigator的导航）

createBottomTabNavigator

使用TouchableWithoutFeedback和onPress在自定义标签组件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} />; } }, }),中手动单击。在NewModalTab组件内部：

NewModalTab

一旦您赶上onPress调度Redux事件

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

使用Navigation Service处理已调度事件。我正在使用onPress = () => { this.props.dispatch({ type: 'NAVIGATION_NAVIGATE', payload: { key: 'NewModalNavigator', routeName: 'NewSelfieNavigator', }}) }

redux-saga

有点复杂，但是可以用。

React Navigation v3 Modal不适用于createBottomTabNavigator

1 个答案: