Introduction to the use of react-navigation in development

The content shared with you in this article is an introduction to the use of react-navigation in development. It has certain reference value. Friends in need can refer to it.

Daily Nonsense

react-navigation is a navigation solution from the react community. Judging from my monthsenior experience in react development, it is no exaggeration to say that it is one of the necessary libraries for react-native to develop apps.

During the development process, different pages will have different headers due to different business needs. This article provides several commonly used various headers that I have encountered. The corresponding react-navigation solution.

I am the main text

Tabs at the bottom are a very common requirement for apps. react-navigation also provides the corresponding API to create the bottom tab: createBottomTabNavigator

How to customize the header of the tab page? Let’s discuss on a case-by-case basis:

All tab pages require header

It’s very simple and requires no additional configuration.

No headers for all tab pages

The first thing you may think of is the navigationOptionsobject settings# for each page in createBottomTabNavigator ##header is null.

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

But in fact, the

navigationOptions object in createBottomTabNavigator does not accept the header parameter, at least it is not written in the document. Official document

Solution: Set in the root-level navigation.

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

Only a certain tab requires a header

In fact, navigators can be nested in each other. Just like in the above example, the Main route page is the bottom navigation created by

createBottomTabNavigator. In the same way, the page of a certain tab in the bottom navigation can also be a navigation page. It’s a bit convoluted, let’s look at the code

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

Because by default bottomTabNavigator will have its own header, and user we have created a routing page with a header, so we will

Main route ( bottomTabNavigato) header is set to null. If not set, the page will have 2 headers. You can try it yourself.

A certain tab page does not need a header or needs to customize the header

What should I do if I only have a certain tab page that does not need a header?

Still starting from
navigationOptions, the navigationPptions attribute can be a function that accepts a navigation object and returns a new object.

For the

navigation object, you can see the official documentation

Here we use the

state attribute of the object.

Now we have the following navigation configuration:

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

The above code creates a bottom navigation containing 3 tabs, in which the header of

phone is customized. What we need to do next is to configure the navigation attribute of TabNavigator in appNavigator, and use different headers according to different routes (that is, when on the home page Or when on the user page, use the default header. When on the phone page, remove the header.

Why remove the header?

Because the phone page has already After customizing the header, we only need to remove the header of the outer TabNavigator. Otherwise, there will be 2 headers (TabNavigator and phone2 headers). This has been mentioned above. In addition, the customized header can also be configured in In the

navigation attribute of TabNavigator in appNavigator. (It has not been verified, you can try it yourself.)

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

Related recommendations:

Analysis of React event system

Analysis of the reasons why animation does not take effect in React

The above is the detailed content of Introduction to the use of react-navigation in development. For more information, please follow other related articles on the PHP Chinese website!