Introduction à l'utilisation de React-Navigation dans le développement

Le contenu partagé avec vous dans cet article est une introduction à l'utilisation de React-Navigation dans le développement. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Absurdités quotidiennes

react-navigation est une solution de navigation de la communauté React. À en juger par mon mois senior expérience dans le développement de React, il n'est pas exagéré de dire qu'il s'agit de react-native l'une des bibliothèques essentielles pour le développement d'applications.

Au cours du processus de développement, différentes pages auront des en-têtes différents en raison de différents besoins commerciaux. Cet article fournit plusieurs couramment utilisés divers en-têtes react-navigation correspondants.

Je suis le texte principal

Les onglets en bas sont une exigence très courante pour les applications. react-navigation fournit également les API correspondantes pour créer des onglets inférieurs : createBottomTabNavigator

Comment personnaliser l'en-tête de la page à onglet ? Discutons au cas par cas :

Toutes les pages à onglet nécessitent un en-tête

C'est très simple et ne nécessite aucune configuration supplémentaire.

Aucun en-tête pour toutes les pages à onglet

La première chose à laquelle vous pouvez penser est de définir l'objet createBottomTabNavigator de chaque page de navigationOptions sur null. header

createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        header: null // 无效！！
      }
    }
  }
)

Mais en fait, l'objet

dans createBottomTabNavigator n'accepte pas le paramètre navigationOptions, du moins il n'est pas écrit dans le document. Document officielheader

Solution : définie dans la navigation au niveau racine.

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator, // TabNavigator就是通过createBottomTabNavigator创建的底部导航
      navigationOptions: {
        header: null
      }
    }
    // other pages
  }
)

Seul un certain onglet nécessite un en-tête

En fait, les navigateurs peuvent être imbriqués les uns dans les autres. Tout comme dans l'exemple ci-dessus, la page de l'itinéraire principal est la navigation inférieure créée par

. De la même manière, la page d'un certain onglet dans la navigation inférieure peut également être une page de navigation. C'est un peu alambiqué, regardons le code createBottomTabNavigator

const bottomTabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        // some options
      }
    },
    User: { // user页要"头"~
      screen: createStackNavigator(
        User: {
          screen: User,
          navigationOptions: {
            header: customHeader
          }
        }
      )
    }
  }
)

const appNavigator = createStackNavigator(
  {
    Main: {
      screen: bottomTabNavigator,
      navigationOptions: {
        header: null // 这里要将bottomTabNavigator的header设为null
      }
    },
    Other: {
      screen: Other
    }
  }
)

Parce que par défaut bottomTabNavigator aura son propre en-tête, et utilisateur nous avons créé une page de routage avec un en-tête, donc nous allons

acheminer (bottomTabNavigato ) L'en-tête est défini sur null S'il n'est pas défini, la page aura 2 en-têtes. Main

Une certaine page à onglet n'a pas besoin d'en-tête ou doit personnaliser l'en-tête

Que dois-je faire si je n'ai qu'une certaine page à onglet qui n'a pas besoin d'en-tête ?

Toujours à partir de
, l'attribut navigationPptions peut être une fonction qui accepte un objet navigationOptions et renvoie un nouvel objet. navigation

Pour l'objet

, vous pouvez voir la documentation officielle navigation

Ici nous utilisons l'attribut

de l'objet. state

Nous avons maintenant la configuration de navigation suivante :

const TabNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        title: '首页'
      }
    },
    Phone: {
      screen: createStackNavigator(
        {
          Phone: {
            screen: Phone,
            navigationOptions: ({ navigation }) => (
              { // phoneHeader为自定义React组件
                header: <PhoneHeader navigation={navigation}/>
              }
            )
          }
        }
      ),
      navigationOptions: {
        tabBarVisible: false,
        title: '机型'
      }
    },
    User: {
      screen: User,
      navigationOptions: {
        title: '我的'
      }
    }
  }
)

Le code ci-dessus crée une navigation inférieure contenant 3 onglets, dans lesquels l'en-tête

est personnalisé. Ce que nous devons faire ensuite est de configurer l'attribut phone de appNavigator dans TabNavigator et d'utiliser différents en-têtes selon différents itinéraires (c'est-à-dire que lorsque vous êtes sur la page d'accueil ou la page utilisateur, utilisez l'en-tête par défaut , lorsque Lorsque vous êtes sur la page du téléphone, navigationSupprimez l'en-tête

Pourquoi supprimer l'en-tête ?

Parce que la page du téléphone a personnalisé l'en-tête, il suffit de le supprimer la couche externe. L'en-tête de TabNavigator suffit. Sinon, il y aura deux en-têtes (TabNavigator et en-têtes de téléphone. De plus, l'en-tête personnalisé peut également être configuré dans l'attribut

(Non vérifié, vous pouvez l'essayer vous-même.) appNavigatorTabNavigatornavigationRecommandations associées :

const AppNavigator = createStackNavigator(
  {
    Main: {
      screen: TabNavigator,
      navigationOptions: ({ navigation }) => {
        const titleMap = {
          Home: '首页',
          User: '我的'
        }
        // 根据路由的顺序以及路由名定义title
        const result = {
          title: titleMap[navigation.state.routes[navigation.state.index].routeName],
          headerTitleStyle: {
            fontWeight: '600',
            color: color.gray_1,
            fontSize: px2p(18)
          },
          headerBackTitle: null
        }
        // 在配置TabNavigator时，phone页面是第一个定义的(zero-indexed)。
        // 所以当index为1的时，header设为null
        // 或者将header设为自定义header，对应修改TabNavigator中phone。
        if (navigation.state.index === 1) { 
          result.header = null
          result.headerTransparent = true
        }
        return result
      }
    },
    ...pages // 其他页面
  },
  {
    initialRouteName: 'Main'
  }
)

Analyse du système d'événements React

Analyse de les raisons pour lesquelles l'animation ne prend pas effet dans 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!