React Native中如何从Modal弹窗内实现页面导航跳转

你当前导航结构仅配置了最外层的Tab导航，没有为Tab下的业务页面嵌套Stack导航栈，edit、report两个表单页面未被注册到路由表中，自然无法触发跳转。如果你的Marker弹窗是独立于导航树的组件，还会存在拿不到有效navigation对象的问题，进一步导致跳转失败。

• 第一步：为Home Tab创建独立的Stack导航栈
  React Navigation的嵌套规则要求，要跳转的页面必须注册在当前页面所在的导航树内。你需要把原来直接挂在Tab下的Map组件，包裹在Stack导航里作为栈的初始页面，同时把edit、report两个表单页注册到这个Stack栈中：

import { createNativeStackNavigator } from '@react-navigation/native-stack';
const HomeStack = createNativeStackNavigator();

const HomeStackScreen = () => {
  return (
    <HomeStack.Navigator screenOptions={{ headerShown: false }}>
      {/* 原Map页面作为栈的首页 */}
      <HomeStack.Screen name="MapMain" component={Map} />
      {/* 注册需要跳转的两个表单页 */}
      <HomeStack.Screen name="edit" component={EditForm} />
      <HomeStack.Screen name="report" component={ReportForm} />
    </HomeStack.Navigator>
  )
}

• 第二步：修改Tab导航配置，替换home路由对应的组件
  把原来Tab配置里home项的component从Map替换为刚创建的HomeStackScreen，其余Tab配置保持不变即可：

<NavigationContainer>
  <TabNav.Navigator initialRouteName='home'>
    <TabNav.Screen 
      name='home' 
      component={HomeStackScreen} 
      options={{
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="map-search-outline" color={color} size={30} style={style.iconStyle} />
        ),
        tabBarLabel: null
      }} 
    />
    <TabNav.Screen 
      name='user' 
      component={User} 
      options={{
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="card-account-details-outline" color={color} size={30} style={style.iconStyle} />
        ),
        tabBarLabel: null
      }} 
    />
    <TabNav.Screen 
      name='settings' 
      component={Settings} 
      options={{
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="set-square" color={color} size={30} style={style.iconStyle} />
        ),
        tabBarLabel: null
      }} 
    />
  </TabNav.Navigator>
</NavigationContainer>

• 第三步：实现Modal内的跳转逻辑
  根据你的Modal写法二选一即可：
  • 如果Modal直接写在Map组件内部：直接使用Map组件props里自带的navigation对象调用跳转方法，支持传入marker相关参数到表单页：

    // Map组件内
    const handleToEdit = () => {
      navigation.navigate('edit', { markerInfo: currentMarkerData })
    }
    

  • 如果Modal是抽离的独立组件，无法直接拿到navigation prop：引入useNavigation hook获取导航对象后再调用跳转：

    import { useNavigation } from '@react-navigation/native';
    
    const MarkerModal = () => {
      const navigation = useNavigation();
      return (
        <Modal>
          {/* 弹窗原有展示内容 */}
          <Button title="编辑" onPress={() => navigation.navigate('edit')} />
          <Button title="上报" onPress={() => navigation.navigate('report')} />
        </Modal>
      )
    }
    

补充配置：如果希望edit、report页面以模态窗形式从底部弹出，只需要给对应Screen的options添加presentation: 'modal'属性即可。

内容的提问来源于stack exchange，提问作者BenoHiT