UITabBarController and UINavigationController are nested in many of the project structures in iOS, and TabBarIOS and NavigatorIOS are nested in ReactNative. The flow and the native iOS are very similar, this article will introduce the nesting of the two, because I do iOS development, so I will only compare with the flow in iOS, Android students can refer to it.

The final result of this Demo is as follows:





Final effect.gif

1. File structure

The file structure created in this Demo looks like this:





PNG file structure

  • Homepage.js stands for HomePage
  • Favorpage.js represents the second page of TabBar.
  • Nextpage.js is the second page pushed by the home page
  • Mytabbar.js is a self-created TabBar and Navigator component

2. Basic use of TabBarIOS and tabbarios. Item

The use of ReactNative TabBarIOS components is actually similar to the use of UITabBarController in iOS. The Tabbarios. Item is similar to every childViewController in iOS development. In iOS development, to create a UITabBarController, we need to create the corresponding Child ViewController and store it in the viewControllers property of UITabBarController. We can then configure the BarItem by setting the tabBarItem property of the Child ViewController. To create a TabBarIOS in ReactNative, we first create the corresponding tabbarios. Item components, encapsulate them in the TabBarIOS component, and then, again, configure the BarItem by setting the tabbarios. Item property.

The TabBarIOS component has the following attributes: TabBarIOS

  • BarTintColor: Background color of the TAB bar.
  • TintColor: The color of the currently selected label icon.
  • UnselectedItemTintColor: Color of the label icon that is not currently selected. This parameter is available only on iOS 10 or later versions
  • Always: A Boolean value that determines whether the label bar always needs to be translucent.

The tabbarios. Item component has the following attributes: tabbarios. Item

  • Badge: a red bubble is displayed in the upper right corner of the icon.
  • Icon: Specifies a custom icon for the current label. If a systemIcon property is defined, this property is ignored
  • OnPress: called when this label is selected. You should modify the component state to make selected={true}.
  • Selected: This property determines whether a subview is visible. If you see a blank page, chances are none of the tabs are selected.
  • SelectedIcon: Custom icon to display when the label is selected. If a systemIcon property is defined, this property is ignored. If an icon is defined without this property, the icon will be colored blue when selected.
  • SystemIcon: Predefined system ICONS. Note that if you use this property, the title and custom icon will be overwritten with the system-defined value.
  • Title: The title text displayed under the icon. If a systemIcon property is defined, this property is ignored.

Open the mytabbar.js file and begin encapsulating the TabBarIOS component. Here is a diagram of the code annotation, which can be understood by following the steps in the diagram:





Code annotation.png

Here is the code in mytabbar.js

import HomePage from './HomePage'
import FavorPage from './FavorPage'

export default class MyTabBar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selectedBarItem : 'home'
    }
  }
  render() {
    return (
      <TabBarIOS
        barTintColor = 'white'
        tintColor = 'green'
        unselectedItemTintColor = 'gray'
        translucent = {true}
        >
          <TabBarIOS.Item
            title = 'home'
            icon = {require('./Image/home.png')}
            selectedIcon = {require('./Image/home-selected.png')}
            selected = {this.state.selectedBarItem === 'home'}
            onPress = {()=>{this.setState({selectedBarItem:'home'})}}
            >
              <HomePage></HomePage>
          </TabBarIOS.Item>
          <TabBarIOS.Item
            title = 'collection'
            systemIcon = 'favorites'
            selected = {this.state.selectedBarItem === 'favor'}
            onPress = {()=>{this.setState({selectedBarItem:'favor'})}} > <FavorPage></FavorPage> </TabBarIOS.Item> </TabBarIOS> ); }}Copy the code

The code for HomePage and FavorPage is not posted due to limited space. It is just a simple page color style display.

Then, import the MyTabBar component in the project’s index.ios.js file and use it to see the effect.

import MyTabBar from './app/MyTabBar'

export default class TabBar_Navigator extends Component {
  render() {
    return(<MyTabBar></MyTabBar>); }}Copy the code

3. Basic use of NavigatorIOS

Once TabBarIOS has been added, we need to add a NavigatorIOS component to the home page to control the navigation. The NavigatorIOS component in ReactNative needs to implement three main properties:

  • InitialRoute: Initializes the route. This property is similar to the rootViewController of the UINavigationController in iOS development. The root page of the navigation controller is configured in this property.

  • ConfigureScene: this property is an optional function used to configureScene animations and gestures. This function takes two parameters, one is the route and the other is the current routing stack.

  • RenderScene: This property is required to render the scene with the specified route. The arguments to the call are route and navigator. In this method, we can route to the current page that needs to be rendered, pass the navigator to the current page as a property, and return the page. In this rendered page, you can get the navigator to do the push operation (this is a bit difficult to understand, you can find more information on the Internet, in fact, I don’t understand very well).

Because we want to embed a navigator in HomePage, replace the
contents of tabbarios. Item in the previous step with the following:

<NavigatorIOS
  style={{flex:1}}
  initialRoute = {{
    component: HomePage,
    title: 'home'
  }}
  configureScene = {(route) =>
    {
      return NavigatorIOS.SceneConfigs.FloatFromBottom;
    }
  }
  renderScene = { (route, navigator) => {
    let HomePage = route.component;
    return <HomePage navigator={navigator}/>
  }}
  >
</NavigatorIOS>Copy the code

On the front page, after the button is clicked, we need to get the navigator from this.props and push the next page with the navigator.push() method. The code is as follows:

export default class HomePage extends Component {

  _gotoNextPage() {
    this.props.navigator.push({
      name: 'NextPage'.component: NextPage
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>This is the home page</Text>
        <TouchableOpacity style={styles.nextBtn} onPress={this._gotoNextPage.bind(this)}>
          <Text style={styles.nextText}>Go to the next page</Text>
        </TouchableOpacity>
      </View>); }}Copy the code

Finally, we have the effect of the beginning of this article.

This article Demo code

Conclusion:

The use of TabBarIOS and NavigatorIOS in ReactNative is actually very similar to the use of iOS development, which can be better understood when writing code compared to iOS.

I just got into RN recently and don’t know much about it. This article is just a summary of RN as an iOS developer, hoping to help those who need to know. There may be some questions, you can put forward, is also to help me. If you want to study RN and need a video tutorial or some books, you can send me a message.