Analyse de cas d'utilisation de React Navigation

Cette fois, je vais vous apporter une analyse des cas d'utilisation de React Navigation. Quelles sont les précautions lors de l'utilisation de React Navigation. Voici des cas réels, jetons un coup d'œil.

1. Barre de navigation

Je rencontre les problèmes suivants lors de l'utilisation de la barre de navigation

1. Il y a une ligne noire en bas

Elle est destinée à faire 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 Android et l'image d'arrière-plan de la barre personnalisée ne peut pas être remplie <.>

réagir La barre de navigation a une hauteur par défaut sous 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

Utiliser headerRight ou headerLeft pour personnaliser le bouton ou la vue

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 surviendront

Dans la classe de chaque page, nous utilisons 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 :

Comment utiliser vue pour implémenter le mini-jeu 2048

Comment utiliser vee-validate dans Vue

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!