我正在開發(fā)一個React Native/Expo應用程序，我面臨著該應用程序在帶有凹槽的設備(例如，iPhone13、iPhone14)上的布局問題。我的應用程序的內容與缺口區(qū)域重疊，我想確保它正確調整以避免任何重疊。

我聽說過react-native-safe-area-context庫及其組件SafeAreaView和SafeAreaProvider，但我不確定如何正確使用它們來處理安全區(qū)域insets并相應地調整屏幕布局。

您能否提供指導，讓我的React Native/Expo應用程序使用SafeAreaView和SafeAreaProvider調整屏幕以繞過設備的凹槽？我如何確保我的應用程序的內容定位正確，并且不與系統(tǒng)UI元素重疊？

下面是我的App.js目前的位置。它現(xiàn)在有SafeAreaProvider，但我試過SafeAreaView，都是從' react-native-safe-area-context '和' react-native '導入的。

``import React from 'react';
import { Text, View, Button, StatusBar, Image, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, AsyncStorage,  } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import {createSwitchNavigator, createStackNavigator, createAppContainer, createBottomTabNavigator} from 'react-navigation'
import LoginScreen from './Login.js';
import styles from './styles';
import MessageScreen from './Message';
import NewMessageScreen from './NewMessage';
import ReplyScreen from './Reply';
import AccountScreen from './Account';
import RosterScreen from './Roster';
import TeamsScreen from './Teams';
import ScheduleScreen from './Schedule';
import EventScreen from './Event';
import * as Font from 'expo-font';

global.testing=true;

class AuthLoadingScreen extends React.Component {
  constructor(props){
    super(props);
    this._loadData();
    global.test=0;
  }

  _loadData = async () => {

    // const logged = await AsyncStorage.getItem('Login');
    // if(logged==!null)
    //   this.props.navigation.navigate('Auth');
    // else{
    //   const LoginData=JSON.parse(logged);
    //   isEmpty=true;
    //   global.dropdown_4_options=LoginData.dropdown_4_options;
    //   global.dropdown_4_defaultValue=LoginData.dropdown_4_defaultValue;
    //   global.logged=logged;
    //   this.props.navigation.navigate(LoginData.Remember_me !== 'YES' ? 'Auth' : 'App');
    // };

    await Font.loadAsync({
      'Corbel': require('./assets/fonts/CORBEL.otf'),
      '!Pepsi!': require('./assets/fonts/PEPSI_pl.ttf'),
    });

  }

  render(){
    return (
      <View style={styles.container}>
        <Text>AuthLoadingScreen</Text>

        <ActivityIndicator/>
        <StatusBar barStyle="default"/>
      </View>
    );
  }
}



const ScheduleStack = createStackNavigator({
    Schedule: { screen: ScheduleScreen },
    Event: { screen: EventScreen },
    },
    {
        headerLayoutPreset:'center',
    }
);


const AccountStack = createStackNavigator({
    Account: { screen: AccountScreen },
    },
    {
        headerLayoutPreset:'center',
    }
);

const AuthStack = createStackNavigator(
    {Login: LoginScreen},
    {
        headerLayoutPreset:'center',
        title:'Team Pass'
    }
);


const TeamsStack = createStackNavigator({
        Teams: { screen: TeamsScreen },
        Roster: { screen: RosterScreen },
    },
    {
        headerLayoutPreset:'center',
    }
);

const MessageStack = createStackNavigator({
    Message: { screen: MessageScreen },
    NewMessage: { screen: NewMessageScreen },
    Reply: { screen: ReplyScreen },
    },
    {
        headerLayoutPreset:'center',
    }
);


const AppStack =   createBottomTabNavigator(
  {
    Schedule: ScheduleStack,
    Teams: TeamsStack,
    Message: MessageStack,
    Account: AccountStack,
  },
  {
   initialRouteName:'Schedule',
    defaultNavigationOptions: ({ navigation }) => ({
          tabBarIcon: ({ focused, tintColor }) =>
        getTabBarIcon(navigation, focused, tintColor),
    }),
    tabBarOptions: {
      activeTintColor: '#bb133e',
      inactiveTintColor: '#002047',
    },
  }
)

class IconWithBadge extends React.Component {
  render() {
    const { name, badgeCount, color, size } = this.props;
    return (
      <SafeAreaProvider>
        <View>style={{ width: 24, height: 24, margin: 5 }}>
        <Ionicons name={name} size={size} color={color} />
        {badgeCount > 0 && (
          <View
            style={{
              // /If you're using react-native < 0.57 overflow outside of the parent
              // will not work on Android, see https://git.io/fhLJ8
              right: -6,
              top: -3,
              backgroundColor: '#bb133e',
              borderRadius: 6,
              width: 12,
              height: 12,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
              {badgeCount}
            </Text>
          </View>
        )}
        </View>
      </SafeAreaProvider>
    );
  }
}


const HomeIconWithBadge = props => {
  // You should pass down the badgeCount in some other ways like context, redux, mobx or event emitters.
  return <IconWithBadge {...props} badgeCount={0} />;
};

const getTabBarIcon = (navigation, focused, tintColor) => {
  const { routeName } = navigation.state;
  let IconComponent = Ionicons;
  let iconName;
  if (routeName === 'Schedule') {
    iconName = 'calendar';
    // We want to add badges to home tab icon
    IconComponent = HomeIconWithBadge;
  } else if (routeName === 'Account') {
    iconName = 'person';
  } else if (routeName === 'Teams') {
    iconName = 'ios-people';
  } else if (routeName === 'Message') {
    iconName = 'mail';
  }

  // You can return any component that you like here!
  return <IconComponent name={iconName} size={25} color={tintColor} />;
};

export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: AppStack,
      Auth: AuthStack
    },{
      //initialRouteName:'AuthLoading'
      initialRouteName:'Auth'
    }
  ),
)


``

我很感激你能提供的任何幫助或代碼示例。謝謝大家！

我正在開發(fā)一個React Native/ Expo應用程序，需要幫助調整應用程序的布局以適應設備的凹槽。我希望避免內容與凹口區(qū)域重疊，并確保應用程序的內容正確定位在設備的安全區(qū)域內。我聽說過react-native-safe area上下文庫及其組件SafeAreaView和SafeAreaProvider，但我不確定如何正確地實現(xiàn)它們。我正在尋找關于使用SafeAreaView和SafeAreaProvider處理安全區(qū)域插入并相應調整屏幕布局的指導和代碼示例。任何幫助都將不勝感激。謝謝大家！