Heim >Web-Frontend >Front-End-Fragen und Antworten >So verwenden Sie die React-Navigationsmethode

So verwenden Sie die React-Navigationsmethode

藏色散人
藏色散人Original
2023-01-03 09:54:312370Durchsuche

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 :'Tab',   
})

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:'最热',
            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; 
    }
})

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

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/>
    ) 
  }
}

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;。

;

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn