Comment utiliser la méthode de navigation React

react navigation injectera la navigation dans les accessoires de toutes les pages de routage enregistrées. Comment l'utiliser : 1. Créez l'itinéraire principal via "const Main = createStackNavigator({...})" ; createBottomTabNavigator" ; 3. Créez des itinéraires de commutation spéciaux, etc. via "createSwitchNavigator".

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment utiliser la méthode de navigation React ?

react-navigation Méthode courante

react-navigation est que le projet rn utilise le gestionnaire de routage, en plus de fournir la gestion de l'historique de routage, il existe également des composants d'interface utilisateur pour le navigateur ! ;

react-navigation injectera la navigation dans les accessoires de toutes les pages d'itinéraire enregistrées !!!

1 Créez l'itinéraire principal ;

createStackNavigator

qui inclut pratiquement toutes les pages d'itinéraires utilisées dans le projet ;

const Main = createStackNavigator({
    Tab: {
        screen: Tab,
        navigationOptions:{
            header:null
        }
    }
     。。。
},{
    initialRouteName :'Tab',   
})

2 . Créez la barre d'onglets inférieure ;

createBottomTabNavigator

C'est-à-dire que plusieurs onglets en bas de la page d'accueil de l'application

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. Créez un itinéraire de commutation spécial ; la page avant de sauter n'entrera pas dans la pile d'historique 

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

4. Créez l'onglet supérieur Les balises de page occuperont la position de la barre de navigation

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

5. NavigationOptions Attributs de configuration couramment utilisés

headerTtile : Titre de la page

headerTitleStyle : Le style du texte du titre

headerStyle : Le style de l'ensemble du bloc de titre

.

6. Les attributs de référence de la partie onglet

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

Le composant BottomTabBar peut également utiliser cet attribut

7 Créer une fonction de retour

Habituellement, nous utilisons this.props.navigation sur la page qui doit être renvoyée pour obtenir les accessoires de navigation. object;

Vous pouvez utiliser

this.props.navigation.goBack()

pour renvoyer la page ; mais la condition préalable pour cela est que this.props.navgation doit être la navigation de la page actuelle ; pour juger :

Dans certains cas particuliers, comme le retour de la clé de retour Android Il est jugé que l'événement de retour n'est pas capturé sur cette page, car l'événement de restauration BackHandler sera alors transmis vers le haut ; ce n'est pas l'objet de navigation qui doit être restauré ; donc go.Back() a été utilisé. Cela ne réussira pas ou dans certains cas, l'objet de navigation n'a pas nécessairement la méthode goBack(), ce qui causera également ce problème ; ;

Par exemple :

La page d'accueil est une route de premier niveau, la page de détail est une route de deuxième niveau et les deux pages sont définies. La fonction de rappel de BackHandler si le BackHandler en détail n'est pas capturé par le courant. page, il sera transmis à la fonction de rappel BackHandler dans home ; alors this.props.navigation dans home fait référence à la page d'accueil, pas aux détails, donc l'appel de goBack ne réussira pas non plus ! ! !

Solution de contournement :

Utilisez NavigationActions ;

Toutes les NavigationActions renvoient des objets qui peuvent être envoyés au routeur à l'aide de la méthode navigation.dispatch().

Prend en charge les opérations suivantes :

Navigate - Navigue vers un autre itinéraire

Back - Revient à l'état précédent

Set Params - Définit les paramètres d'un itinéraire donné

Init - Utilisé pour initialiser le premier si l'état est Statut non défini

Voir le document pour plus de détails : https://reactnavigation.org/docs/zh-Hans/navigation-actions.html

Vous pouvez effectuer l'opération de retour en passant :

dispatch(NavigationActions.back());

 ;

Remarque :

Méthode dispatch() C'est dans this.props.navigation

Apprentissage recommandé : "Tutoriel vidéo React"

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!