React-Navigation

一、主要构成
按使用形式主要分三部分:
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}) => (
                    
                ),
            },
        }
    },
    Certificate: {
        screen: Certificate,
        navigationOptions: {
            tabBar: {
                label: '凭证',
                icon: ({tintColor}) => (
                    
                ),
            },
        }
    },
}, {
    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;
{
     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 接收参数