如何在 ios 中制作 react-native 全屏模式答案

【问题标题】：how to make a react-native full screen modal in ios如何在 ios 中制作 react-native 全屏模式
【发布时间】：2021-12-02 11:11:36
【问题描述】：

我正在尝试使用react native来实现iOS的模态效果，也参考react-native-navigation，现在我想要一个全屏效果，比如ios中的presentationStyle = .full screen，请问怎么弄？我的 react-native 版本好像是 0.66.0

这是我的代码：

App.js：


import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Screen_A from "./src/Screen_A";
import Screen_B from "./src/Screen_B";

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Screen_A" component={Screen_A} />
        <Stack.Group screenOptions={{presentation: 'modal'}}>
          <Stack.Screen name="Screen_B" component={Screen_B} />
        </Stack.Group>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

屏幕 A：

export default Screen_A = () => {
    const navigation = useNavigation();
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text style={{ fontSize: 40 }}>Screen A</Text>
            <Pressable
                onPress={() => navigation.navigate('Screen_B')}
                style={({ pressed }) => [
                    {
                        backgroundColor: pressed
                            ? 'rgb(210, 230, 255)'
                            : 'white'
                    },
                    styles.wrapperCustom,
                    { marginTop: 20 }
                ]}>
                {({ pressed }) => (
                    <Text style={[styles.text, { fontSize: 40 }]}>
                        {pressed ? 'Pressed!' : 'Go to Screen B'}
                    </Text>
                )}
            </Pressable>
        </View>
    )
}

画面B：

export default Screen_B = () => {
    const navigation = useNavigation();
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text style={{fontSize: 40}}>Screen B</Text>
            <Pressable
                style={{ marginTop: 20, backgroundColor: 'red' }}
                onPress={() => navigation.goBack()}
            >
                <Text>Go back Screen A</Text>
            </Pressable>
        </View>
    )
}

结果：

如图所示，B屏没有全屏显示（顶部有10%左右的间距），请问如何实现呢？谢谢！

【问题讨论】：

React 导航提供示例 -> reactnavigation.org/docs/modal
@MichaelBahl 我尝试了示例代码，但仍然不是全屏。
所以你不想要一个模式，你只想要一个全屏窗口？
其实，我只是想要一个全屏模式，但我不知道如何在 6.x 版本中制作它。我试过在5.x版本下可以轻松实现。所以我把版本降级到5.x。see here

标签： ios react-native modalviewcontroller

【解决方案1】：

我修改了全屏模式sample 以满足您的需求

<NavigationContainer>
  <RootStack.Navigator>
    <RootStack.Group>
      <RootStack.Screen name="Home" component={HomeScreen} />
      <RootStack.Screen name="Details" component={DetailsScreen} />
    </RootStack.Group>
    <RootStack.Group screenOptions={{ presentation: 'card', headerMode:"none" }}>
      <RootStack.Screen name="MyModal" component={ModalScreen} />
    </RootStack.Group>
  </RootStack.Navigator>
</NavigationContainer>

【讨论】：