react-navigation native-stack，如何更改模态高度？

Question

/* eslint-disable react/no-unstable-nested-components */
import React from 'react';
import { View } from 'react-native';

import PersonalNewSecurity from './screens/PersonalNewSecurity';
import Home from './screens/Home';
import SelectLocation from './screens/SelectLocation';
import CameraScreen from './screens/CameraScreen';
import HomeToCheckOut from './screens/HomeToCheckOut';
import HomeAfterCheckOut from './screens/HomeAfterCheckout';
import ScanQR from './screens/ScanQR';
import DetailCheckIn from './screens/DetailCheckIn';
import DetailCheckOut from './screens/DetailCheckOut';
import UpdateAccount from './screens/UpdateAccount';
import Others from './screens/OthersScreen';

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home';
          } else if (route.name === 'Settings') {
            iconName = focused
              ? 'account-circle-outline'
              : 'account-circle-outline';
          } else if (route.name === 'ScanQR') {
            iconName = focused ? 'qrcode-scan' : 'qrcode-scan';
          }

          // You can return any component that you like here!
          return (
            <Icon
              name={iconName}
              size={size}
              color={color}
            />
          );
        },
        tabBarActiveTintColor: 'black',
        tabBarInactiveTintColor: 'gray',
        tabBarStyle: { backgroundColor: '#E5E7EB' },
      })}
    >
      <Tab.Screen
        name="Home"
        component={DetailCheckOut}
        // options={{ tabBarBadge: 3, headerShown: false }}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="ScanQR"
        component={StackNavigator}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="Settings"
        component={PersonalNewSecurity}
        options={{ headerShown: false }}
      />
    </Tab.Navigator>
  );
}

function StackNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        presentation: 'modal', // or formSheet
        cardOverlayEnabled: true,
        gestureEnabled: true,
        animation: 'slide_from_bottom',
      }}
    >
      <Stack.Screen
        name="Select Location"
        component={SelectLocation}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Other Location"
        component={Others}
        options={{ headerShown: false }}
      />
    </Stack.Navigator>
  );
}

export default function RootStack() {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
}

navigation.js

import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import React from 'react';

export default function OthersScreen({ navigation }) {
  return (
    <View className={'ml-4 p-3 mr-4 mt-1'}>
      <Text className={'text-3xl font-bold'}>Other Location</Text>
      <Text className={'text-sm mt-4 mb-1'}>Latitude: 19.67</Text>
      <Text className={'text-sm mb-1'}>Longitude: 100.34</Text>
      <Text className={'text-sm mb-1'}>Timestamp: 2022-08-21 12:30 PM</Text>
      <Text className={'text-sm mt-4 font-bold'}>Remarks</Text>
      <TextInput
        className={'mt-1 border rounded-lg p-7'}
        placeholder="Please enter reamarks here"
        placeholderTextColor="#000"
      />
      <View className={'mt-4 items-center flex-row space-x-5 '}>
        <TouchableOpacity
          className={'p-3 w-40 items-center justify-center border rounded-lg'}
          onPress={() => navigation.goBack()}
        >
          <Text className={'text-sm'}>Cancel</Text>
        </TouchableOpacity>
        <TouchableOpacity
          className={
            'bg-gray-400 p-3 w-40 items-center justify-center rounded-lg'
          }
        >
          <Text className={'text-sm text-white'}>Check-In</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

otherscreen.js

我想做这样的

是否可以使用react-navigation native-stack v6来改变高度？我已经看过文档，它没有提到任何可以改变模态高度的样式

我期待模态的高度可以改变

Answer 1

将 a 添加到我的应用程序的根目录似乎会干扰已经存在的应用程序（它已经在后台使用了 PortalProvider）。只有我打开的所有其他底页才会可见。

我只需将反应导航模式屏幕的内容包装在一个 :

中就可以工作了

function AppStack() {
        return (
            <NativeStack.Navigator>
                {/* ... */}
                <NativeStack.Group screenOptions={{ presentation: 'modal' }}>
                    <NativeStack.Screen 
                        name="MyScreenThatNeedsToBeAbleToOpenABottomSheetModal" 
                        component={MyScreenThatNeedsToBeAbleToOpenABottomSheetModal} 
                    />
                </NativeStack.Group>
            </NativeStack.Navigator>
        )
    }
    
function MyScreenThatNeedsToBeAbleToOpenABottomSheetModal() {
    return (
        <BottomSheetModalProvider>
            {/* Screen content here, and one of these children can now open a BottomSheetModal */}
        </BottomSheetModalProvider>
    )
}