React Navigation Bottom Tabs Navigator 加模态屏幕

Question

我有以下代码使用 React Native Navigation 创建标签 v6.x:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

HomeScreen 有一个应该调用模态屏幕的按钮。

我的问题是：如何在我的导航器中添加这个模态屏幕以从 HomeScreen 调用它，这个调用代码如何？

谢谢！

Answer 1

您无需在导航器中包含模式即可从主页打开它。

你可以这样做：

const HomeScreen = () => {
  const [modalVisible, setModalVisible] = useState(false);

  function _myModal() {

    return(
      <Modal
        animationType="slide"
        visible={modalVisible}
        onRequestClose={() => {setModalVisible(false)}}
      >
        <Text>Hello, I am a modal!</Text>
      </Modal>
    )
  }

  // your code
  return (
    <View>
      {/*your code*/}
      <Pressable
        onPress={() => setModalVisible(true)}
      >
        <Text>Show Modal</Text>
      </Pressable>
      {_myModal()}
    </View>
  );
};

The React-Native documentation 也有一个 class 组件的示例，以防您使用这些组件，还有更多信息也应该对您有所帮助。

Answer 2

如果您想从主页打开模态屏幕，那么您应该创建一个主屏幕堆栈导航器并在该堆栈中添加两个屏幕（主屏幕和模态屏幕），然后通过按下按钮导航到该模态。

选项卡导航器(RootNavigation MyTabs)

...
function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

堆栈导航器（HomeStack）

cosnt Stack = createStackNavigator();

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
      <Stack.Screen name="ModalScreen" component={ModalScreen}
         options={{ presentation: 'modal' }} />
    </Stack.Navigator>
  );
}

主屏幕

export default function HomeScreen({navigation}) {
   return (
      <View>
          <TouchableOpacity onPress={() => navigation.navigate('ModalScreen'}>
              <Text>Open ModalScreen</Text>
          </TouchableOpacity>
      </View>
   )
}

React Navigation Bottom Tabs Navigator 加模态屏幕

React Navigation Bottom Tabs Navigator plus Modal Screen

react-native

react-navigation