1. First, download, install, and introduce react-navigation
npm install --save react-navigation
or
yarn add react-navigation
StackNavigatorSimilar to the top navigation bar, used to jump pages and pass parameters. TabNavigatorSimilar to the bottom tab bar, used to distinguish modules. DrawerNavigatorDrawer, similar to sliding out a page from the left side of the app.
2. Create a folder router in the root directory, and create three js files
index.js, navConfig.js, routeConfig.js in it
The code of index.js is as follows: import React, { Component } from 'react' ;
import { Text, View, AppRegistry } from 'react-native'; import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation"; import RouteConfigs from './routeConfig' import StackNavigatorConfig from './navConfig' const Navigator = StackNavigator(RouteConfigs, StackNavigatorConfig);
export default class MainComponent extends Component { render() { return ( <Navigator/> ) }; } AppRegistry.registerComponent('reactNative', () => MainComponent );
The code of navConfig.js is as follows:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
const StackNavigatorConfig = {
initialRouteName: 'Tabbar' , //point to tabbar, configure tabbar
initialRouteParams: {initPara: 'Initial page parameters' },
navigationOptions: {
// title: '',
// headerTitleStyle: {fontSize: 18, color: '#666666'},
// headerStyle: {height: 48, backgroundColor: '#FFF'},
},
// paths: 'page/main',
mode: 'card',
headerMode: 'screen',
cardStyle: {backgroundColor: "#ffffff"},
transitionConfig: (() => ({
screenInterpolator: CardStackStyleInterpolator.forHorizontal,
})),
onTransitionStart: (() => {
console.log( 'Page jump animation starts' );
}),
onTransitionEnd: (() => {
console.log( 'Page jump animation ended' );
}),
};
export default StackNavigatorConfig;
// initialRouteName - the route name of the initial display page in the navigator component, if not set, the default first route page is the initial display page
// initialRouteParams - the parameters for the initial route, in the initial display page, you can pass this. props.navigation.state.params to get
// navigationOptions - configuration options for the routing page, which will be overridden by the corresponding properties of navigationOptions in the RouteConfigs parameter.
// paths - the overlay mapping configuration of the path set in the route
// mode - the page jumping method, there are two kinds of card and modal, the default is card:
// card - the default jump of the native system
// modal - only for iOS platform, modal jump
// headerMode - when the page jumps, the animation mode of the head, there are float, screen, none:
// float - gradient, similar to the native effect of iOS
// screen - the title and the screen together Fade in and out
// none - no animation
// cardStyle - set a uniform style for each page, such as background color, font size, etc.
//transitionConfig - configure the page transition animation, overriding the default animation effect
// onTransitionStart - called when the page transition animation is about to start
// onTransitionEnd - will be called as soon as the page transition animation is completed
The code of routeConfig.js is as follows:
import React, { Component } from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";
// Import all components (including tabbar-mapped components)
import Home from '../demoPage/home' ;
import News from '../demoPage/news';
import My from '../demoPage/my';
import Page4 from '../demoPage/page4' ; //Other components (non-tabbar)
// tabbar routing configuration
const Tabbar = TabNavigator({
/* *
screen: The function of navigation is the same, corresponding to the interface name, you can pass values and jump through this screen on other pages.
navigationOptions: configure some properties of TabNavigator
title: title, which will set the title of the navigation bar and tab bar at the same time
tabBarVisible: Whether to hide the tab bar. Not hidden by default (true)
tabBarIcon: Set the icon of the tab bar. need to be set for each
tabBarLabel: Set the title of the tab bar. recommend
*/
Home: {
screen: Home ,
navigationOptions: ({navigation}) => ({
/**
* tabBarLabel tabs 名称
*/
tabBarLabel: 'Home' ,
tabBarIcon: ({focused,tintColor}) => (
/**
* The focused property selects the rendered image
*/
focused ? <Image style={styles.icon} source={require('../image/index.png')} /> : <Image style={styles.icon} source={require('../image/tab_btn_home.png')} />
)
})
},
News: {
screen: News,
navigationOptions: ({navigation}) => ({
tabBarLabel: 'Message' ,
tabBarIcon: ({focused,tintColor}) => (
focused ? <Image style={styles.icon} source={require('../image/tab_btn_classification_hl.png')} /> : <Image style={styles.icon} source={require('../image/tab_btn_classification.png')} />
)
})
},
My: {
screen: My,
navigationOptions: ({navigation}) => ({
tabBarLabel: 'my' ,
tabBarIcon: ({focused,tintColor}) => (
focused ? <Image style={styles.icon} source={require('../image/tab_btn_user_hl.png')} /> : <Image style={styles.icon} source={require('../image/tab_btn_user.png')} />
)
})
},
},{
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom' ,
initialRouteName: 'Home',
showIcon:'true'
/**
Navigation bar configuration
tabBarPosition: Set the position of the tabbar, iOS defaults to the bottom, Android defaults to the top. (property values: 'top', 'bottom')
swipeEnabled: Whether to allow swiping between tabs
animationEnabled: whether to show animation when changing labels
lazy: Whether to render labels lazily as needed, rather than in advance, which means that all the bottom tab bars are loaded when the app is opened, the default is false, and the recommended value is true
trueinitialRouteName: Set the default page component
backBehavior: Whether press the back key to jump to the first Tab (home page), none means not jumping
tabBarOptions: configure some properties of the tab bar iOS properties
activeTintColor: when the foreground color of the label and icon is active
activeBackgroundColor: when the background color of the label and icon is active
inactiveTintColor: when the foreground color of label and icon is inactive
inactiveBackgroundColor: The background color of label and icon is inactive
showLabel: Whether to display the label, the default style is enabled: the style of the tabbar
labelStyle: the style Android attribute of the label
activeTintColor: when the foreground color of the label and icon is active
inactiveTintColor: when the foreground color of label and icon is inactive
showIcon: whether to display the icon, off by default
showLabel: Whether to display the label, the default style is enabled: the style of the tabbar
labelStyle: label style upperCaseLabel: whether to capitalize the label, the default is true
pressColor: The color of the material ripple effect (Android version needs to be greater than 5.0)
pressOpacity: Opacity change of the press label (Android version needs to be less than 5.0)
scrollEnabled: whether to enable scrollable tabs tabStyle: the style of the tab
indicatorStyle: The style object for the label indicator (the row at the bottom of the tab). There will be an extra line at the bottom of Android, you can temporarily solve this problem by setting the height to 0
labelStyle: the style of the label
iconStyle: icon style
*/
})
// The entire app routing configuration
const RouteConfigs = {
// Import tabbar routing configuration
Tabbar: {
screen: Tabbar,
},
// The following is the routing configuration of other components (non-tabbar)
Page4: {
screen: Page4,
navigationOptions: ({navigation}) => ({
title: 'Page4 Page' ,
}),
},
};
// style
const styles = StyleSheet.create ({
icon: {
width:20,
height:20
}
})
export default RouteConfigs;
// ********************************navigationOptions property**************** **************************************************** *
// title: 'Home',
// header - custom header component, the system header component will disappear after using this property
// headerTitle - the title of the header, that is, the title of the page
// headerBackTitle - return the title , the default is title
// headerTruncatedBackTitle - display this title when the return title cannot be displayed (for example, the return title is too long), the default is "Back"
// headerRight - the component on the right side of the header
// headerLeft - the component on the left side of the header
// headerStyle - The style of the header component
// headerTitleStyle - the style of the header title // headerBackTitleStyle - the style
of the header return title
// headerTintColor - the color of the header
//headerPressColorAndroid - MD style ripple color for Android 5.0 and above
// gesturesEnabled - whether to slide back, iOS default true, Android default false