0.RN版本信息
Snip20190717_1.png
1.安装插件
1.1初始化项目
react-native init XXX --version 0.59.0
7EF9CF6BC2E4CAFE23D8EFD1E78B8077.png
1.2 启动项目
4ACA0D75F278420ABFF98FAB79889413.png
1.3 开启实时刷新服务
0353FE24538C6700764A57DA61AE4AF4.png
1.4 安装react-navigation
yarn add react-navigation
5E8D0D3349FF5C31A5E6DD9518EE1566.png
1.5 安装react-native-gesture-handler
B012019E3810CA1811D1847F065F4783.png
1.6 link
3322D82B806A5DF499FE1E8562A24B88.png
2代码书写-----stackNavigator
2.1 设置Home导航容器为App的根容器
在index中修改App为Home
/**
* @format
*/
import React from 'react'
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import Home from './navigators/pages/Home'
AppRegistry.registerComponent(appName, () => Home);
2.2配置Home的导航容器
import {
createStackNavigator,
createAppContainer
} from 'react-navigation'
import React from 'react'
import {View, Button} from 'react-native'
import first from './first'
import second from './second'
const Home = createStackNavigator({
first:{
screen:first,
navigationOptions:{
title:`First`,
headerBackTitle:`返回`
}
},
second:{
screen:second,
navigationOptions: {
title: `Second`
}
}
});
export default HomeNav = createAppContainer(Home)
2.3 用于跳转的两个界面
first
import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class first extends Component{
render(){
const {navigation} = this.props;
return
First
{/*写法一不传值*/}
{/*写法二传值*/}
}
}
*********************************************************
second
import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class second extends Component{
render(){
const {navigation} = this.props;
return
First
{'一级界面传递过来的name的值 = ' + navigation.state.params.name}
}
}
second 通过setParams 改变当前页面naviagtion中的state.params的值
import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class second extends Component{
render(){
const {navigation} = this.props;
// console.warn(navigation.state.params);
const {setParams} = this.props.navigation;
return
First
{/*使用setParams改变 route params*/}
{'一级界面传递过来的name的值 = ' + navigation.state.params.name}
}
}
3. demo
4 : createBottomTabNavigator
效果为:
Simulator Screen Shot - iPhone X - 2019-07-19 at 18.01.53.png
相对于 stackNavigator来说需要多导入一个矢量图库
react-native-vector-icons
我安装的版本: "react-native-vector-icons": "^6.6.0",
安装完需要
react-native link
代码实现
import React from 'react'
import {
createAppContainer,
createBottomTabNavigator
} from 'react-navigation'
import first from './first'
import second from './second'
import third from './third'
import Ionicons from 'react-native-vector-icons/Ionicons'
const BottomTab = createBottomTabNavigator({
first: {
screen: first,
navigationOptions: {
tabBarLabel: '首页',
tabBarIcon: ({tintColor}) => (
5. createSwitchNavigator
最简单的导航 适用于登录之后切换到首页 或者引导页之后切换到登录页 具有不可♂️逆性
import {
createAppContainer,
createSwitchNavigator,
createStackNavigator
} from 'react-navigation'
import Home from './switchNavHome'
import Login from './switchNavLogin'
import Page1 from './switchNavPage1'
const AuthoStack = createStackNavigator({
login:{
screen:Login,
navigationOptions:{
title:'登录'
}
}
});
const AppStack = createStackNavigator({
home:{
screen:Home,
navigationOptions:{
title:'首页'
}
} ,
page1:{
screen:Page1,
navigationOptions:{
title:'二级页面'
}
}
});
const switchNav = createSwitchNavigator({
Autho : AuthoStack,
App : AppStack
},{
initialRouteName:'Autho'
});
export default switchContainer = createAppContainer(switchNav);
5.1 switchNavLogin
import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class switchNavLogin extends Component{
render(){
const {navigation} = this.props;
return
switchNavLogin
}
}
5.2 switchNavHome
import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class switchNavHome extends Component{
render(){
const {navigation} = this.props;
return
switchNavHome
}
}
5.3 switchNavPage1
import React,{Component} from 'react'
import {View,Text, Button} from 'react-native'
export default class switchNavPage1 extends Component{
render(){
return
switchNavPage1
}
}
6. createDrawerNavigator
抽屉效果
import {
createAppContainer,
createDrawerNavigator,
DrawerItems
} from 'react-navigation'
import page1 from './drawerPage1'
import page2 from './drawerPage2'
import page3 from './drawerPage3'
import Meions from 'react-native-vector-icons/MaterialIcons'
import {ScrollView, SafeAreaView} from 'react-native'
import React from 'react'
const DrawerN = createDrawerNavigator({
page11: {
screen: page1,
navigationOptions: {
drawerLabel: '侧边栏Item1',
drawerIcon: ({tintColor}) => {
return
}
}
},
page12: {
screen: page2,
navigationOptions: {
drawerLabel: '侧边栏Item2',
drawerIcon: ({tintColor}) => {
return
}
}
}
}, {
initialRouteName: 'page11',
contentOptions: {
activeTintColor: 'orange'
},
contentComponent: (props) => (
)
});
export default DrawerContainer = createAppContainer(DrawerN);
import React, {Component} from 'react'
import {View, Text, StyleSheet, Button} from 'react-native'
export default class drawerPage1 extends Component {
render() {
const {navigation} = this.props;
return
DrawerPage1
}
}
const styles = StyleSheet.create({
container: {
marginTop: 50,
flex: 1
}
});