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 // 无效！！
      }
    }
  }
)

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

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

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

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

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

, vous pouvez voir la documentation officielle navigation

de l'objet. state

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: '我的'
      }
    }
  }
)

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

(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!