Welche Vorsichtsmaßnahmen sind bei der Verwendung von React Navigation zu beachten?

Dieses Mal erkläre ich Ihnen, welche Vorsichtsmaßnahmenfür die Verwendung von React Navigation geltenund welche Vorsichtsmaßnahmen für die Verwendung von React Navigation gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Bei der Entwicklung von React Native bin ich auf viele Probleme bei der Verwendung des React-Navigations-Frameworks gestoßen. Hauptsächlich aufgrund der relativen Inkompatibilität zwischen Android und iOS notieren Sie hiermit

1. Navigationsleiste

Bei Verwendung der Navigationsleiste stoßen Sie auf Folgendes Probleme Problem

1. Unten in der Navigationsleiste befindet sich eine schwarze Linie

Die ursprüngliche Absicht besteht darin, eine Seite zu erstellen, auf der die Farbe der Leiste einheitlich ist mit der Farbe der Seite. 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 Leiste von Android befindet sich ein Schatten, und das benutzerdefinierte Leistenhintergrundbild kann nicht ausgefüllt werden nach oben

Die React-Navigationsleiste hat in Android 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. Verwenden Sie benutzerdefinierte Schaltflächen in der Navigationsleiste

Verwenden Sie headerRight oder headerLeft zum Anpassen die Schaltfläche oder Ansicht

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

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

In der Klasse jeder Seite verwenden wir statische Navigationsoptionen ={...} 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:

Analyse der Schritte zum Veröffentlichen von Vue-Komponenten in npm

Detaillierte Erläuterung der Verwendung von Vue mehrstufige Komponente bereitstellen/injizieren

Das obige ist der detaillierte Inhalt vonWelche Vorsichtsmaßnahmen sind bei der Verwendung von React Navigation zu beachten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!