Expliquez l'importance de SafeViewArea dans React Native ?

Le composant SafeViewArea est conçu pour afficher votre contenu dans les limites de sécurité de l'appareil. Il est responsable de l'ajout de remplissage et de la garantie que les barres de navigation, les barres d'outils, les barres d'onglets, etc. ne couvrent pas votre contenu. Ce composant n'est disponible que pour les appareils iOS, en voici un exemple fonctionnel.

Comprenons les avantages de l'utilisation de SafeAreaView à l'aide d'un exemple.

Considérez ce qui suit en utilisant un composant d'affichage pour afficher le texte "Bienvenue dans Tutorialspoint!".

Exemple

Afficher le texte "Bienvenue dans Tutorialspoint!" Composant Inside View

Utilisez le style flex sur le composant View : 1. Le composant Texte est contenu dans le composant Vue et affiche le texte "Bienvenue dans Tutorialspoint!". Si vous voyez une sortie par défaut, le texte est affiché dans la barre d'état.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const App = () => {
   return (
      <View style={styles.container}>
         <Text style={{ color:&#39;red&#39;, fontSize:&#39;30&#39;}}>Welcome To Tutorialspoint!</Text>
            </View>
      );
   }
   const styles = StyleSheet.create({
      container: {
         flex: 1
      },
   });
export default App;

Output

Voyons maintenant le même exemple dans iOS avec l'aide de SafeAreaView.

Exemple : SafeAreaView fonctionne

Dans l'exemple ci-dessous, nous avons remplacé le composant View par SafeAreaView.

Pour utiliser SafeViewArea, vous devez l'importer comme suit -

import { SafeAreaView } from 'react-native';

Maintenant, si vous voyez la sortie, vous verrez un remplissage ajouté au composant texte et désormais il ne chevauchera plus la barre d'état.

import React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
const App = () => {
   return (
      <SafeAreaView style={styles.container}>
         <Text style={{ color:&#39;red&#39;, fontSize:&#39;30&#39;}}>Welcome To Tutorialspoint!</Text>
            </SafeAreaView>
      );
   }
   const styles = StyleSheet.create({
   container: {
      flex: 1
   },
});
export default App;

sortie

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!