一、主要构成
按使用形式主要分三部分:
1 、StackNavigator: 类似于普通的Navigator，屏幕上方导航栏
2 、TabNavigator: 相当于ios里面的TabBarController，屏幕下方的标签栏
3 、DrawerNavigator: 抽屉效果，侧边滑出
二、使用
1、新建项目
react-native init ComponentDemo
2、在应用中安装此库
npm install --save react-navigation
3、测试TabNavigator、StackNavigator和DrawerNavigator
react-navigation 做 TarBar 布局和导航非常简单方便,最好用的导航了
https://reactnavigation.org/docs/intro/
常用布局一般是首页 4 个 TabBar 布局，直接用 TabNavigator 就行
import {StackNavigator, TabNavigator} from "react-navigation";
const MainScreenNavigator = TabNavigator({
Home: {
screen: Home,
navigationOptions: {
tabBar: {
label: '互助',
icon: ({tintColor}) => (
<Image
source={require('../images/home.png')}
style={[{tintColor: tintColor},styles.icon]}
/
>
),
},
}
},
Certificate: {
screen: Certificate,
navigationOptions: {
tabBar: {
label: '凭证',
icon: ({tintColor}) => (
<Image
source={require('../images/cert.png')}
style={[{tintColor: tintColor},styles.icon]}
/
>
),
},
}
},
}, {
animationEnabled: false, // 切换页面时不显示动画
tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
swipeEnabled: false, // 禁止左右滑动
backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转
tabBarOptions: {
activeTintColor: '#0F9C00', // 文字和图片选中颜色
inactiveTintColor: '#999', // 文字和图片默认颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了， 不知道还有没有其它方法隐藏？？？
style: {
backgroundColor: '#fff', // TabBar 背景色
},
labelStyle: {
fontSize: 12, // 文字大小
},
},
});
const styles = StyleSheet.create({
icon: {
height: 22,
width: 22,
resizeMode: 'contain'
}
});
然后顶层再用一个 StackNavigator ,把首页和其它页面嵌进去就行了。
StackNavigator 和 TabNavigator 是可以相互嵌套的，这样就能从首页 Tab 跳转到其它页面了
const App = StackNavigator({
Main: {
screen: MainScreenNavigator,
navigationOptions: {
header: {
title: '互助',
style: {
backgroundColor: '#fff'
},
backTitle: null
}
}
},
PlanDetail: {
screen: PlanDetail,
navigationOptions: {
header: {
style: {
backgroundColor: '#fff'
},
}
}
}
},{
mode: 'card', // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
headerMode: 'none', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
});
//页面跳转、返回、传参
const {navigate} = this.props.navigation;
<TouchableHighlight onPress={()=>{
navigate('PlanDetail',{name:'leslie',id:100});
}}>
// 返回上一页
this.props.navigation.goBack();
//navigate 函数根据名字跳转，还可以有第二个参数用于页面之间传递参数
// 接收参数
export default class PlanDetail extends Component {
static navigationOptions = {
// title 可以这样设置成一个函数， state 会自动传过来
title: ({state}) => `${state.params.name}`,
};
componentDidMount() {
const {params} = this.props.navigation.state;
const id = [params.id](http://params.id);
}
// 通过 this.props.navigation.state.params 接收参数
