This article uses TabNavigator and StackNavigator to encapsulate bottom navigation and page jumps

1. Import the dependent libraries

yarn add react-navigation --save
Copy the code
yarn add react-navigation-stack --save
Copy the code
yarn add react-navigation-tabs --save
Copy the code

Then check whether the three items in the red box are installed successfully in package.json file

2.App.js

// **** introduces the following three ******
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';

// Import others as required
import React from 'react';
import { StyleSheet, Image } from 'react-native';
// Some already edited pages
import home from './src/pages/home'
import me from './src/pages/me'
import notice from './src/pages/notice'
import Detail from './src/pages/detail';
import order from './src/pages/order';
import Login from './src/pages/login';
// ICONS in the navigation bar can also be introduced into a third-party icon library
const ic_home_select = require('./src/assets/tab_icon_K_select_new.png');
const ic_notice_select = require('./src/assets/tab_icon_schedule_select_new.png');
const ic_me_select = require('./src/assets/tab_icon_me_select_new.png');
const ic_me = require('./src/assets/tab_icon_me_normal.png');
const ic_home = require('./src/assets/tab_icon_K_normal.png');
const ic_notice = require('./src/assets/tab_icon_schedule_normal.png');

// Bottom navigation bar ----- start ---------
const BottomContainer = createBottomTabNavigator({
  Home: {
    screen: home,
    navigationOptions: {
      tabBarLabel: 'home'.tabBarIcon: ({ tintColor, focused }) = >( focused ? <Image source={ic_home_select} style={styles.iconStyle} /> : <Image source={ic_home} style={styles.iconStyle} /> ) } }, Notice: { screen: notice, navigationOptions: { tabBarLabel: 'message ', tabBarIcon: ({focused, tintColor}) => (focused? <Image source={ic_notice_select} style={styles.iconStyle} /> : <Image source={ic_notice} style={styles.iconStyle} /> ) } }, Me: { screen: me, navigationOptions: { tabBarLabel: 'message ', tabBarIcon: ({focused, tintColor}) => (focused? <Image source={ic_me_select} style={styles.iconStyle} /> : <Image source={ic_me} style={styles.iconStyle} /> ) } }, }, { defaultNavigationOptions: ({ navigation }) => { const { routeName } = navigation.state; let headerTitle = routeName; return { headerTitle, }; }, tabBarOptions: { activeTintColor: '#3DA8F5', inactiveTintColor: '#808080', labelStyle: { fontSize: 12, }, style: { backgroundColor: "#FFFFFF", borderColor:"white" }, }, --------- const stackMain = createStackNavigator({Tab:{screen:BottomContainer, NavigationOptions :{header:null}}, Detail:{screen:Detail, navigationOptions:{headerTitle:' details ',}}, Order: { screen: Order, navigationOptions:{headerTitle:' reserved ',}}, Login:{screen:Login, navigationOptions:{header:null,}},}); ----- end --------- export default createAppContainer(stackMain); Const styles = StyleSheet. Create ({iconStyle: {width: 30, height: 30},});Copy the code

3. Realize the jump in the page

Jump from the navigation page to the detail sub-page and open the navigation page notice.js:

 // Click make a reservation to go to the 'detail' page
/ / this. Props. Navigation. Navigate (' the page names defined)
checkDetail = (a)= > {
    this.props.navigation.navigate('Detail')}Copy the code

4. The rendering

We can’t post videos. We can only take screenshots.

then