Detailed explanation of the steps to use react-navigation

This time I will bring you a detailed explanation of the steps to use react-navigation. What are the precautions when using react-navigation? Here are practical cases, let’s take a look.

1. Main components

It is mainly divided into three parts according to the usage form:

1. StackNavigator: Similar to an ordinary Navigator, the navigation bar at the top of the screen

2. TabNavigator: is equivalent to the TabBarController in ios, and the tab bar at the bottom of the screen

3. DrawerNavigator: Drawer effect, slide out from the side

2. Use

1. Create a new project

react-native init ComponentDemo

2. Install this library in the application

npm install --save react-navigation

After installation, I found that it is a beta version (v1.0.0-beta.7), but there is a pitfall?! We will talk about this pitfall in detail in a moment~

3. Test TabNavigator, StackNavigator and DrawerNavigator

(1) Create a new HomePage.js

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  Button,
  Image
} from 'react-native';
import {
  StackNavigator,
  TabNavigator
} from 'react-navigation';
import ChatScreen from './ChatScreen';
import MinePage from './MinePage';
class HomePage extends React.Component{
  static navigationOptions={
    title: '首页',//设置标题内容
    header:{
      backTitle: ' ',//返回按钮标题内容（默认为上一级标题内容）
    }
  }
  constructor(props) {
    super(props);
  }
  render() {
    const {navigate} = this.props.navigation;
    return (
      <view>
        <text>Hello, Navigation!</text>
        <button> navigate('Chat',{user:'Sybil'})}
          title="点击跳转"/>
      </button></view>
    )
  }
}
const MainScreenNavigator = TabNavigator({
  Home: {
    screen: HomePage,
    navigationOptions: {
      tabBar: {
        label: '首页',
        icon: ({tintColor}) => (
          <image></image>
        ),
      },
    }
  },
  Certificate: {
    screen: MinePage,
    navigationOptions: {
      tabBar: {
        label: '我的',
        icon: ({tintColor}) => (
          <image></image>
        ),
      },
    }
  },
}, {
  animationEnabled: false, // 切换页面时不显示动画
  tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
  swipeEnabled: false, // 禁止左右滑动
  backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转
  tabBarOptions: {
    activeTintColor: '#008AC9', // 文字和图片选中颜色
    inactiveTintColor: '#999', // 文字和图片默认颜色
    showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
    indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了
    style: {
      backgroundColor: '#fff', // TabBar 背景色
    },
    labelStyle: {
      fontSize: 12, // 文字大小
    },
  },
});
const styles = StyleSheet.create({
  container:{
    flex: 1,
    backgroundColor:'#fff'
  },
  icon: {
    height: 22,
    width: 22,
    resizeMode: 'contain'
  }
});
const SimpleApp = StackNavigator({
  Home: {screen: MainScreenNavigator},
  Chat:{screen:ChatScreen},
});
export default SimpleApp;

(2) Create a new ChatScreen.js

import React from 'react';
import {
  Button,
  Image,
  View,
  Text
} from 'react-native';
class ChatScreen extends React.Component {
  static navigationOptions = {
    title:'聊天',
  };
  render() {
    const {params} = this.props.navigation.state;
    return (
    <view>
      <text>Chat with {params.user}</text>
    </view>
    );
  }
}
export default ChatScreen;

(3) Create a new MinePage.js

import React,{Component} from 'react';
import {
  Button,
  Image,
  View,
  Text,
  StyleSheet
} from 'react-native';
import {
  DrawerNavigator
} from 'react-navigation';
import MyNotificationsScreen from './MyNotificationsScreen';
class MinePage extends Component{
  static navigationOptions = {
     title:'我的',
     drawerLabel: '我的',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
     drawerIcon: ({ tintColor }) => (
     <image></image>
   ),
  };
  render(){;
    return(
      <view>
        <text>Sybil</text>
        <button> this.props.navigation.navigate('DrawerOpen')}
         title="点击打开侧滑菜单"
        />
      </button></view>
    );
  }
}
const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});
const MyChatNavigator = DrawerNavigator({
  MyChat: {
    screen: MinePage,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
},{
  drawerWidth: 220, // 抽屉宽
  drawerPosition: 'left', // 抽屉在左边还是右边
  // contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件
  contentOptions: {
    initialRouteName: MinePage, // 默认页面组件
    activeTintColor: '#008AC9', // 选中文字颜色
    activeBackgroundColor: '#f5f5f5', // 选中背景颜色
    inactiveTintColor: '#000', // 未选中文字颜色
    inactiveBackgroundColor: '#fff', // 未选中背景颜色
    style: { // 样式
    }
  }
});
export default MyChatNavigator;

(4) Write MyNotificationsScreen.js

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  Button,
  Image
} from 'react-native';
class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    title:'通知',
    drawerLabel: '通知',
    drawerIcon: ({ tintColor }) => (
      <image></image>
    ),
  };
  render() {
    return (
       <view>
        <button> this.props.navigation.navigate('DrawerOpen')}
          title="点击打开侧滑菜单"
        />
        <button> this.props.navigation.goBack()}
          title="返回我的界面"
        />
      </button></button></view>
    );
  }
}
const styles = StyleSheet.create({
  tabIcon: {
    width: 24,
    height: 24,
  },
});
export default MyNotificationsScreen;

(5) Run

and report an error? This is the pit we mentioned above~

What is the reason? It turns out to be a bug in the beta version. Find line 12 of node_modules/react-navigation/src/views/Header.js in the directory. Delete it and it will be OK~

Ps: Unfortunately, I don’t have this error. Leave a picture~ When I am about to publish this article, the latest version has changed to (v1.0.0-beta.9), and the latest version has modified the above bug!

Okay, run it again~

Last dynamic rendering:

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of Vue multi-level component provide/inject

Vue parent-child component value transfer and slot application Detailed explanation of steps

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