So verwenden Sie die React-Navigationsmethode-Front-End-Fragen und Antworten-php.cn

So verwenden Sie die React-Navigationsmethode

藏色散人

Freigeben： 2023-01-04 16:42:11

Original

2348 Leute haben es durchsucht

react navigation fügt Navigation in die Requisiten aller registrierten Routing-Seiten ein. So verwenden Sie es: 1. Erstellen Sie die Hauptroute über „const Main = createStackNavigator({...})“; Spalte „createBottomTabNavigator“; 3. Erstellen Sie spezielle Weichenrouten usw. über „createSwitchNavigator“.

So verwenden Sie die React-Navigationsmethode

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie verwende ich die React-Navigationsmethode?

react-navigation Die übliche Methode

react-navigation besteht darin, dass das rn-Projekt zusätzlich zur Routing-Verlaufsverwaltung auch UI-Komponenten für den Navigator verwendet. ;

react-navigation fügt Navigation in die Requisiten aller registrierten Routenseiten ein!!!

1. Erstellen Sie die Hauptroute;

createStackNavigator

die im Grunde alle im Projekt verwendeten Seitenrouten enthält;

const Main = createStackNavigator({
    Tab: {
        screen: Tab,
        navigationOptions:{
            header:null
        }
    }
     。。。
},{
    initialRouteName :&#39;Tab&#39;,   
})

Nach dem Login kopieren

2 . Erstellen Sie die untere Tab-Leiste;

createBottomTabNavigator

Das heißt, mehrere Tabs am unteren Rand der App-Startseite

const Tab = createBottomTabNavigator({
    Home: {
        screen: Home,
        navigationOptions:{
            header:null,
            title:&#39;最热&#39;,
            tabBarIcon:({focused,tintColor})=>{
                return (
                    <MCIcon name="chili-hot"  size={16} color = {focused?tintColor:&#39;#404040&#39;}></MCIcon>
                )
            }    
        }
    },
   。。。
},{
    initialRouteName :&#39;Home&#39;,
    tabBarOptions:{
        activeTintColor:&#39;#1d85d0&#39; 
    }
})

Nach dem Login kopieren

3. Erstellen Sie eine spezielle Switch-Route, bevor Sie in den Verlaufsstapel gelangen. Erstellen Sie die obere Registerkarte. Seiten-Tags belegen die Position in der Navigationsleiste. NavigationOptions Häufig verwendete Konfigurationsattribute. HeaderTtile: Seitentitel. HeaderTitleStyle: Der Stil des Titeltexts. HeaderStyle: Der Stil des gesamten Titelblocks

6. Referenzattribute des Tab-Teils

createSwitchNavigator
//欢迎页跳转不可返回
const Navigation = createSwitchNavigator({
    Init:Init,
    Main:Main
},{
    initialRouteName :&#39;Init&#39;
})

Nach dem Login kopieren

BottomTabBar-Komponente kann dieses Attribut auch verwenden

7. Erstellen Sie eine Rückgabefunktion

Normalerweise verwenden wir this.props.navigation auf der Seite, die zurückgegeben werden muss, um die Navigations-Requisiten abzurufen Objekt;

Sie können

createMaterialTopTabNavigator
export default class Home extends Component {
  render() {
    const TabNav = createMaterialTopTabNavigator({
      Tab1:{
        screen: Tab1,
        navigationOptions:{
            title:&#39;tab1&#39;,
            header:null
        }
      }
。。。
   
    },{。。。}) 
    return (
      <TabNav/>
    ) 
  }
}

Nach dem Login kopieren

verwenden, um zur Seite zurückzukehren. Voraussetzung hierfür ist jedoch, dass this.props.navgation die Navigation der aktuellen Seite sein muss; das heißt, Sie können this.props.navigation.state.routeName überprüfen Zur Beurteilung:

In einigen Sonderfällen, z. B. bei der Rückgabe des Android-Rückgabeschlüssels, wird davon ausgegangen, dass das Rückgabeereignis nicht auf dieser Seite erfasst wird, da das Rollback-Ereignis BackHandler möglicherweise nach oben weitergeleitet wird nicht das Navigationsobjekt sein, das zurückgesetzt werden muss; daher wurde go.Back() verwendet. Dies ist nicht möglich, oder in einigen Fällen verfügt das Navigationsobjekt nicht unbedingt über die Methode goBack(), was ebenfalls zu diesem Problem führt ;

Zum Beispiel:

Die Startseite ist eine Route der ersten Ebene, und beide Seiten sind festgelegt. Die Rückruffunktion von BackHandler wird nicht im Detail erfasst Seite, es wird an die BackHandler-Rückruffunktion in Home übergeben; dann bezieht sich this.props.navigation in Home auf die Homepage, nicht auf Details, daher wird der Aufruf von goBack auch nicht erfolgreich sein! ! !

Workaround:

NavigationActions verwenden;

Alle NavigationActions geben Objekte zurück, die mit der Methode navigation.dispatch() an den Router gesendet werden können.

Unterstützt die folgenden Vorgänge:

Navigieren – Navigieren zu einer anderen Route

Zurück – Zurück zum vorherigen Status

Set Params – Parameter für eine bestimmte Route festlegen

Init – Wird verwendet, um die erste Route zu initialisieren, wenn der Status lautet undefinierter Status

Weitere Informationen finden Sie im Dokument: https://reactnavigation.org/docs/zh-Hans/navigation-actions.html

Sie können den Rückgabevorgang ausführen, indem Sie Folgendes übergeben:

tabBarOptions - 具有以下属性的对象:
activeTintColor -活动选项卡的标签和图标颜色。
activeBackgroundColor -活动选项卡的背景色。
inactiveTintColor -"非活动" 选项卡的标签和图标颜色。
inactiveBackgroundColor -非活动选项卡的背景色。
showLabel -是否显示选项卡的标签, 默认值为 true。
showIcon - 是否显示 Tab 的图标，默认为false。
style -选项卡栏的样式对象。
labelStyle -选项卡标签的样式对象。
tabStyle -选项卡的样式对象。
allowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置，默认值都是 true。
safeAreaInset - 为 <SafeAreaView> 组件重写 forceInset prop， 默认值：{ bottom: &#39;always&#39;, top: &#39;never&#39; }； top | bottom | left | right 的可选值有： &#39;always&#39; | &#39;never&#39;。

Nach dem Login kopieren

;

Hinweis:

„dispatch()“-Methode Es ist in this.props.navigation

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die React-Navigationsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!