Anwendungsfallanalyse von React Navigation

Dieses Mal werde ich Ihnen eine Analyse der Anwendungsfälle von React Navigation bringen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von React Navigation?

1. Navigationsleiste

Bei der Verwendung der Navigationsleiste treten die folgenden Probleme auf

1 Unten befindet sich eine schwarze Linie

Sie soll eine Seite erstellen, bei der die Farbe des Balkens mit der Farbe der Seite übereinstimmt. Nur wenn oben noch zwei weitere Knöpfe vorhanden sind. Am unteren Rand der Leiste wurde eine schwarze Linie gefunden. Dadurch kann die Leiste den gewünschten Seiteneffekt nicht gut erreichen. Nachdem Sie den Code in der Kopfzeile festgelegt haben, können Sie

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

2 entfernen. Am unteren Rand der Android-Leiste befindet sich ein Schatten, und das benutzerdefinierte Hintergrundbild der Leiste kann nicht mit

Navigationsleiste reagieren In Android gibt es standardmäßig eine Höhe. Der visuelle Effekt besteht darin, dass unten ein Schatten entsteht. Ein weiterer störender Effekt entsteht, wenn eine benutzerdefinierte Leiste mit einem Hintergrundbild verwendet wird. Sie werden feststellen, dass das Hintergrundbild den Effekt einer unvollständigen Abdeckung hat. Es gibt immer eine Lücke an den Seiten. Dieses Problem tritt unter iOS nicht auf. Dieses Problem kann gelöst werden, indem das Höhenattribut auf Null gesetzt wird

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

3. Das Problem der Zentrierung des Balkentitels in Android

In Android der Titel der Leiste ist linkszentriert. iOS ist standardmäßig zentriert. Sie können die folgende Schreibmethode verwenden, um

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

zu zentrieren, wenn auf der linken Seite keine Schaltflächen vorhanden sind. Es reicht aus, so zu schreiben. Aber wenn auf der linken Seite eine Return-Taste oder andere benutzerdefinierte Tasten vorhanden sind. Der Titel wird in Android versetzt. Die Lösung besteht darin, rechts eine leere Schaltfläche hinzuzufügen

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

4. Die Navigationsleiste mit Hintergrundbild

unterscheidet sich von Yuansheng. In der Reaktionsnavigationsleiste gibt es kein Hintergrundbildattribut. Mit anderen Worten: Wenn wir die Navigationsleiste mit einem Hintergrundbild verwenden möchten, müssen wir eine benutzerdefinierte Ansicht verwenden.

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. Gestenkonfliktproblem, wenn StackNavigator und DrawerNavigator verschachtelt sind

Wenn DrawerNavigator in StackNavigator verschachtelt ist. Nach dem Aufrufen der sekundären Schnittstelle von StackNav steht die Zurück-Geste im Konflikt mit dem Öffnen des DrawerNav-Menüs.

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

Ändern Sie diese Einstellung entsprechend Ihren Anforderungen

5.Problem mit der Höheninkonsistenz der Navigationsleiste

Bei Verwendung einer benutzerdefinierten Leiste. Android und iOS sind höchst inkonsistent. Android berechnet die Nav-Höhe von der Oberkante des Telefons aus. Standardmäßig verschiebt iOS die Höhe der Statusleiste nach unten. Um eine gleichmäßige Wirkung zu erzielen. Sie müssen die

paddingTop-Eigenschaft der Android-Leiste auf die Höhe der Statusleiste einstellen

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

6. Benutzerdefinierte Schaltflächen in der Navigationsleiste verwenden

Verwenden Sie headerRight oder headerLeft, um die Schaltfläche oder Ansicht anzupassen

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

Aber wenn die onPress-Methode this.props, this.state oder andere Methoden in der Klasse verwendet, treten jeweils Probleme auf

In der Seitenklasse verwenden wir static navigationOptions={...}, um einige Navigationskonfigurationen zu konfigurieren. Aber weil die durch static geänderten Eigenschaften zu den statischen Eigenschaften der Klasse gehören. Die Eigenschaftsmethode hierfür kann nicht aufgerufen werden. Daher müssen wir die Methode this.props.navigation.setParams({key:value ...}) verwenden, um das Klickereignis der Header-Schaltfläche festzulegen.

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;
  };
  ...
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man Vue verwendet, um das 2048-Minispiel zu implementieren

Wie man Vee-Validate verwendet Vue

Das obige ist der detaillierte Inhalt vonAnwendungsfallanalyse von React Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!