react-navigation 做 TarBar 布局和导航非常简单方便,最好用的导航了http://www.jianshu.com/p/2ce08b92cf60 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' }, } } } }); AppRegistry.registerComponent('QQHZ_RN', () => App);navigate 函数根据名字跳转,还可以有第二个参数用于页面之间传递参数
通过 this.props.navigation.state.params 接收参数