在官方文档里，导航跳转也就是路由有Navigator和NavigatorIOS，一个是通用的，一个是iOS专用的，但是在使用的过程中有很多坑需要我们解决啊，但是开发的过程就是解决坑的过程啊。
今天小萌说一个简单，好用而且稳定的路由管理库。
一、安装react-navigation
这就是我们前面要学习npm和yarn命令的好处啦，以后我们会接触各种各样的库的，所以很主要哦
[yarn 以及npm区别]https://www.jianshu.com/p/f4a8f450442e
[npm包管理工具] https://www.jianshu.com/p/4f9da8d2c3de
react-navigation开源库越来越受欢迎了，跳转流畅，点赞
yarn add react-navigation
//或者
npm install --save react-navigation
该库包含三类组件：
（1）StackNavigator：用来跳转页面和传递参数
（2）TabNavigator：类似底部导航栏，用来在同一屏幕下切换不同界面
（3）DrawerNavigator：侧滑菜单导航栏，用于轻松设置带抽屉导航的屏幕
二、react-navigation使用
先介绍一下各自的属性吧，大同小异，这些属性呢可以先不看，直接看下面的按钮，需要什么属性，想实现什么效果再来这里查找，时间长了，属性也就记在脑子里了。
（1）、StackNavigator属性介绍
navigationOptions：配置StackNavigator的一些属性。
title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用
header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null
headerTitle：设置导航栏标题，推荐
headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null，设置null之后不显示
headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"
headerRight：设置导航条右侧。可以是按钮或者其他视图控件
headerLeft：设置导航条左侧。可以是按钮或者其他视图控件
headerStyle：设置导航条的样式。背景色，宽高等
headerTitleStyle：设置导航栏文字样式
headerBackTitleStyle：设置导航栏‘返回’文字样式
headerTintColor：设置导航栏颜色
headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭
screen：对应界面名称，需要填入import之后的页面
mode：定义跳转风格
card：使用iOS和安卓默认的风格
modal：iOS独有的使屏幕从底部画出。类似iOS的present效果
headerMode：返回上级页面时动画效果
float：iOS默认的效果
screen：滑动过程中，整个页面都会返回
none：无动画
cardStyle：自定义设置跳转效果
transitionConfig： 自定义设置滑动返回的配置
onTransitionStart：当转换动画即将开始时被调用的功能
onTransitionEnd：当转换动画完成，将被调用的功能
path：路由中设置的路径的覆盖映射配置
initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件
initialRouteParams：初始路由参数
注：大家可能对于path不太理解。path属性适用于其他app或浏览器使用url打开本app并进入指定页面。path属性用于声明一个界面路径，例如：【/pages/Home】。此时我们可以在手机浏览器中输入：app名称://pages/Home来启动该App，并进入Home界面。
(2)、TabNavigator属性介绍
screen：和导航的功能是一样的，对应界面名称，可以在其他页面通过这个screen传值和跳转。
navigationOptions：配置TabNavigator的一些属性
title：标题，会同时设置导航条和标签栏的title
tabBarVisible：是否隐藏标签栏。默认不隐藏(true)
tabBarIcon：设置标签栏的图标。需要给每个都设置
tabBarLabel：设置标签栏的title。推荐
导航栏配置
tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'）
swipeEnabled：是否允许在标签之间进行滑动
animationEnabled：是否在更改标签时显示动画
lazy：是否根据需要懒惰呈现标签，而不是提前，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐为true
initialRouteName： 设置默认的页面组件
backBehavior：按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions：配置标签栏的一些属性iOS属性
activeTintColor：label和icon的前景色 活跃状态下
activeBackgroundColor：label和icon的背景色 活跃状态下
inactiveTintColor：label和icon的前景色 不活跃状态下
inactiveBackgroundColor：label和icon的背景色 不活跃状态下
showLabel：是否显示label，默认开启 style：tabbar的样式
labelStyle：label的样式安卓属性
activeTintColor：label和icon的前景色 活跃状态下
inactiveTintColor：label和icon的前景色 不活跃状态下
showIcon：是否显示图标，默认关闭
showLabel：是否显示label，默认开启 style：tabbar的样式
labelStyle：label的样式 upperCaseLabel：是否使标签大写，默认为true
pressColor：material涟漪效果的颜色（安卓版本需要大于5.0）
pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0）
scrollEnabled：是否启用可滚动选项卡 tabStyle：tab的样式
indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
labelStyle：label的样式
iconStyle：图标样式
(3)、DrawerNavigator属性介绍
DrawerNavigatorConfig
drawerWidth - 抽屉的宽度
drawerPosition - 抽屉的位置 值有left 、right 默认是left
contentComponent - 用来自定义抽屉的组件，默认的组件是DrawerView 但DrawerView是不能滑动的
contentOptions - 配置抽屉内容
initialRouteName - 初始路由的routeName
order - 定义抽屉项目顺序的routeNames数组。
路径 - 提供routeName到路径配置的映射，它覆盖routeConfigs中设置的路径。
backBehavior - 后退按钮是否会切换到初始路由？ 如果是，设置为initialRoute，否则为none。 默认为initialRoute行为
DrawerItems的contentOptions属性
activeTintColor - 活动标签的标签和图标颜色 选中文字颜色
activeBackgroundColor - 活动标签的背景颜色 选中背景颜色
inactiveTintColor - 非活动标签的标签和图标颜色 未选中文字颜色
inactiveBackgroundColor - 非活动标签的背景颜色 未选中背景颜色
style样式
labelStyle 抽屉标签样式
onItemPress 每次调用按钮Item时调用该方法
drawerLabel 抽屉标注，可以是元素 或一个函数这个函数返回一个元素
drawerIcon 抽屉图标 可以是元素 或一个函数这个函数返回一个元素
打开或关闭抽屉方法
this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer
github地址例子
//第一个例子只有路由跳转和传值很简单的例子，适合初学者
https://github.com/shuilanjianyue/StackNavigator
//Tab和路由加在一起使用
https://github.com/shuilanjianyue/StackNavigator-TabNavigator
三、示例
照着一步一的做即可
1、TabNavigator 界面切换
API定义： TabNavigator(RouteConfigs, TabNavigatorConfig)
先定义两个HomeScreen.js 和 SettingsScreen.js界面
HomeScreen.js界面
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Button,
} from 'react-native';
export default class HomeScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome} >
首页界面
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
SettingsScreen.js界面
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
export default class SettingsScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
设置界面
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
在App.js界面引入
import {TabNavigator,TabBarBottom} from 'react-navigation';
import HomeScreen from './HomeScreen';
import SettingsScreen from './SettingsScreen';
const TabBars = TabNavigator({
Home:
{
screen: HomeScreen,
navigationOptions:({navigation}) => ({
tabBarLabel:'首页',
tabBarIcon:({focused,tintColor}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./images/pfb_tabbar_homepage_2x.png')}
selectedImage={require('./images/pfb_tabbar_homepage_selected_2x.png')} //图片随意
/>
)
}),
},
Settings:
{
screen: SettingsScreen,
navigationOptions:({navigation}) => ({
tabBarLabel:'设置',
tabBarIcon:({focused,tintColor}) => (
<TabBarItem
tintColor={tintColor}
focused={focused}
normalImage={require('./images/pfb_tabbar_mine_2x.png')}
selectedImage={require('./images/pfb_tabbar_mine_selected_2x.png')}//图片随意
/>
)
}
),
},
},
{
tabBarCompact:TabBarBottom,
tabBarVisible:false,
tabBarPosition:'bottom',
swipeEnabled:false,
animationEnabled:false,
lazy:true,
tabBarOptions:{
activeTintColor:'#06c1ae',
inactiveTintColor:'#979797',
style:{backgroundColor:'#ffffff',},
labelStyle: {
fontSize: 10, // 文字大小
},
}
}
);
上面的例子中TabBarItem为封装的组件，以后可以直接使用
import React,{Component} from 'react';
import {Image} from 'react-native';
export default class TabBarItem extends Component {
render() {
return(
<Image source={ this.props.focused ? this.props.selectedImage : this.props.normalImage }
style={ { tintColor:this.props.tintColor,width:25,height:25 } }
/>
)
}
}
可以看到，我们定义了一个名称为【TabBars】的TabNavigator的导航组件。在组件中，分为两层参数：
（1）第一层参数定义了要切换的界面，即【首页】、【设置】两个界面组件，通过screen属性指定。并且通过navigationOptions属性设置相关属性参数。
（2）设置导航栏的属性参数。
在App.js中加入：
export default class App extends Component {
render() {
return (
<TabBars/>
);
}
}
运行就可以看到Tab切换效果了
2、StackNavigator 界面间的跳转
定义：StackNavigator(RouteConfigs, StackNavigatorConfig)
TabNavigator定义好之后，需要用StackNavigator，顾名思义，StackNavigator就是以栈的方式来存放整个界面的，而TabNavigator是作为一个界面内不同子界面之间切换。所以还需要我们定义StackNavigator：
加入ProductScreen.js界面
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Button,
} from 'react-native';
export default class ProductScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
将要跳转的界面
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
在App.js中加入
const Navigator = StackNavigator(
{
Tab:{screen:TabBars},
Product:{screen:ProductScreen}
},
{
navigationOptions:{
headerBackTitle:null,
headerTintColor:'#333333',
showIcon:true,
swipeEnabled:false,
animationEnabled:false,
},
mode:'card',
});
修改：
在HomeScreen.js中添加跳转按钮
<Button title = "跳转"
onPress = {() => {this.props.navigation.navigate('Product')}}/>
看起来和TabNavigator很相似，同样是指定了两个参数：
（1）指定要跳转的界面组件。同样是screen属性标识界面组件，不多赘述。
（2）定义跳转属性参数，即顶部导航栏的一些参数设置和跳转方式。
可以看到，我们将Tab作为一个界面设置到了StackNavigator。这样就可以实现Tab导航和界面间跳转的效果了。
最后就是在App.js中render中引用StackNavigator：
export default class Demo extends Component {
render() {
return (
<Navigator />
);
}
}
这样就实现了界面跳转和切换。
还有其他效果，下面介绍一下主要的函数，具体用法看下Demo一目了然。
在界面组件注入到StackNavigator中时，界面组件就被赋予了navigation属性，即在界面组件中可以通过【this.props.navigation】获取并进行一些操作。
navigation属性中提供了很多的函数简化界面间操作，简单列举几点：
（1）通过navigate函数实现界面之间跳转：
this.props.navigation.navigate('Mine');
参数为我们在StackNavigator注册界面组件时的名称。
从当前页面返回到上一页：
// 返回上一页
this.props.navigation.goBack();
（2）跳转时传值：
this.props.navigation.navigate('Mine',{info:'传值过去'});
第一个参数同样为要跳转的界面组件名称，第二个参数为要传递的参数，info可以理解为key，后面即传递的参数。
（3）获取值：
this.props.navigation.state.params.info
通过state.params来获取传来的参数，后面为key值。此处为info。
3、DrawerNavigator实现抽屉导航
1、导航实现
API定义：DrawerNavigator（RouteConfigs，DrawerNavigatorConfig）
（1）界面中定义DrawerNavigator：
import {StackNavigator,TabNavigator,DrawerNavigator} from 'react-
navigation';
import HomeScreen from './pages/HomePage';
import MineScreen from './pages/MinePage';
export default class Demo extends Component {
render() {
return (
<Navigator />
);
}
}
const Navigator = DrawerNavigator({
Home:{screen:HomeScreen},
Mine:{screen:MineScreen},
});
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
（2）HomeScreen界面和MineScreen界面：
export default class HomePage extends Component {
static navigationOptions = {
drawerLabel: '首页',
drawerIcon:({tintColor}) => (
<Image
source={require('./../imgs/ic_happy.png')}
style={[styles.icon, {tintColor: tintColor}]}/>
),
};
render() {
return(
<View style={{flex:1}}>
<Text onPress={this._skip.bind(this)}>点击跳转</Text>
</View>
);
}
_skip() {
this.props.navigation.navigate("Mine");
}
}
export default class MinePage extends Component {
static navigationOptions = {
drawerLabel:'我',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./../imgs/ic_h.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return(
<View style={{flex:1}}>
<Text onPress={this._skip.bind(this)}>返回上一界面</Text>
</View>
);
}
/**
* 跳转
*/
_skip() {
this.props.navigation.goBack();
}
}
代码很简单，实现了界面之间的跳转。
网友评论