Quelles sont les précautions d’utilisation de React Navigation ?

Cette fois, je vais vous apporter quelles sont les précautions pour utiliser React Navigation et quelles sont les précautions pour utiliser React Navigation Ce qui suit est un cas pratique, jetons un coup d'œil.

Lors du développement de React Native, j'ai rencontré de nombreux problèmes lors de l'utilisation du framework de navigation React. Principalement en raison de l'incompatibilité relative entre Android et iOS, enregistrez par la présente

1. Barre de navigation

Lorsque vous utilisez la barre de navigation, vous rencontrez ce qui suit problèmes Problème

1. Il y a une ligne noire en bas de la barre de navigation

L'intention initiale est de créer une page où la couleur de la barre est cohérente. avec la couleur de la page. Seulement s'il y a deux autres boutons en haut. J'ai trouvé une ligne noire au bas de la barre. Par conséquent, la barre ne peut pas bien correspondre à l’effet de page souhaité. Après avoir défini le code dans l'en-tête, vous pouvez supprimer

static navigationOptions = {
 ...
 headerStyle: {
    ...
    borderBottomWidth: 0,
  },
 }

2. Il y a une ombre au bas de la barre de Android et l'image d'arrière-plan de la barre personnalisée. impossible de remplir

La barre de navigation React a une hauteur par défaut dans Android. L'effet visuel est qu'il y aura une ombre en bas. Et un autre effet gênant survient lorsqu'une barre personnalisée avec une image d'arrière-plan est utilisée. Vous constaterez que l’image d’arrière-plan a l’effet d’une couverture incomplète. Il y a toujours un écart sur les côtés. Ce problème ne se produit pas sous iOS. Ce problème peut être résolu en définissant l'attribut d'élévation à zéro

 static navigationOptions = {
 ...
 headerStyle: {
    ...
    elevation: 0,
  },
 }

3. Le problème du centrage du titre de la barre dans Android

Sous Android, le titre de la barre est centrée à gauche. iOS est centré par défaut. Vous pouvez utiliser la méthode d'écriture suivante pour centrer

static navigationOptions = {
 ...
 headerTitleStyle: {
    //此属性是标题的Style属性。可以接受<Text>标签的style
    ...
    alignSelf: "center",
  },
 }

lorsqu'il n'y a pas de boutons sur le côté gauche. Il suffit d'écrire ainsi. Mais s'il y a une touche retour ou d'autres touches personnalisées sur le côté gauche. Le titre sera décalé sous Android. La solution est d'ajouter un bouton vide à droite

static navigationOptions = {
 ...
 headerRight: <View />
 }

4. La barre de navigation avec image de fond

est différente de Yuansheng. Il n'y a pas d'attribut d'image d'arrière-plan dans la barre de navigation de réaction. Autrement dit, lorsque l’on souhaite utiliser la barre de navigation avec une image de fond, il faut utiliser une vue personnalisée.

import {Header} from "react-navigation";
//header 需导入
const ImageHeader = props => (
  <View>
    <Image
      style={{position: "absolute", zIndex: -1, width: "100%", height: "100%", resizeMode: "cover"}}
      source={require(...)}
    />
    <Header {...props} style={{backgroundColor: "transparent"}} />
  </View>
);
static navigationOptions = {
 ...
 headerStyle: {
   //背景颜色必须为透明，不然无法透出底部图片
   backgroundColor: "transparent",
   //安卓中不添加此属性会导致背景图无法铺满
   elevation: 0,
 },
  header: props => {
    return <ImageHeader {...props} />;
  },
 }

5. Problème de conflit de gestes lorsque StackNavigator et DrawerNavigator sont imbriqués

Lorsque DrawerNavigator est imbriqué dans StackNavigator. Après être entré dans l'interface secondaire de StackNav, le geste de retour entre en conflit avec l'ouverture du menu DrawerNav.

static navigationOptions = {
 ...
 //禁止打开菜单
 drawerLockMode: "locked-closed", 
 //允许使用返回手势
 gesturesEnabled: true,
 }

Ce paramètre peut être modifié en fonction de vos besoins

5. Problème d'incohérence de la hauteur de la barre de navigation

Lors de l'utilisation d'une barre personnalisée. Android et iOS sont très incohérents. Android calcule la hauteur de navigation à partir du haut du téléphone. Par défaut, iOS décalera la hauteur de la barre d'état vers le bas. Pour obtenir un effet uniforme. Vous devez définir la propriété paddingTop de la barre Android sur la hauteur de la barre d'état

import {StatusBar, Platform} from "react-native";
navigationOptions = {
 ...
 headerStyle: {
   ...
   paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight,
  },
 }

6. Barre de navigation à l'aide de boutons personnalisés

Utilisez headerRight ou headerLeft pour personnaliser. le bouton Ou Afficher

static navigationOptions = {
 ...
 headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={...}>
        <Text style={styles.NavSureButton}>btn</Text>
      </TouchableOpacity>)
 }

Mais si la méthode onPress utilise this.props, this.state ou d'autres méthodes dans la classe, des problèmes surgiront

Dans la classe de chaque page, nous utilisez static navigationOptions={...} pour configurer certaines configurations de navigation. Mais parce que les propriétés modifiées par static appartiennent aux propriétés statiques de la classe. La méthode de propriété de ceci ne peut pas être appelée. Nous devons donc utiliser la méthode this.props.navigation.setParams({key:value ...}) pour définir l'événement de clic du bouton d'en-tête.

class Demo extends React,Component{
 componentWillMount() {
  //绑定方法
  this.props.navigation.setParams({rightOnPress: this.rightBtnOnPress});
 }
 //点击方法
 rightBtnOnPress = ()=>{
  ...
 }
  static navigationOptions = ({navigation}) => {
    const params = navigation.state.params || {};
    let navigationOptions = {
    ...
    headerRight = (<TouchableOpacity style={{marginRight: 10}} onPress={params.rightOnPress}>
        <Text style={styles.NavSureButton}>btn</Text>
      </TouchableOpacity>)
    }
    return navigationOptions;
  };
  ...
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Analyse des étapes de publication des composants de vue sur npm

Explication détaillée de l'utilisation de Vue composant multi-niveaux fournir/injecter

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!