react-navigation 简单使用

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);

页面跳转、返回、传参

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;
    }

通过 this.props.navigation.state.params 接收参数