React Navigation的使用

在React Navigation中主要有三种类型的组件：

•      StackNavigation   用于实现各个页面之间的跳转
•      TabNavigation   用来实现同一个页面上不同界面的切换
•      DrawerNavigation   用来实现侧滑的抽屉效果

StackNavigation

采用堆栈式的页面导航来实现各个界面的跳转。它的构造函数

createStackNavigator(RouteConfigs,StackNavigatorConfig)

参数 RouteConfigs

   RouteConfig参数 表示各个页面路由配置，类似于android原生开发中的AndroidManifest.xml，它是让导航器知道需要导航的路由对应的页面。

const RouteConfigs = {
    Home: {
        screen: HomePage,
        navigationOptions: ({navigation}) => ({
            title: '首页',
        }),
    },
    Find: {
        screen: FindPage,
        navigationOptions: ({navigation}) => ({
            title: '发现',
        }),
    },
    Mine: {
        screen: MinePage,
        navigationOptions: ({navigation}) => ({
            title: '我的',
        }),
    },
};

这里为导航器配置了三个页面，Home,Find,Mine为路由名称，screen属性值HomePage,FindPage,MinePage为对应的页面。

navigationOptions 是对应页面的相关配置选项：

title - 通用头部标题，相关的属性还有headerTitle,tabBarLabel
header = 自定义的头部组件使用该组件会覆盖掉系统默认的头部组件，将其设置为null,则隐藏标题栏。
headerBackTitle - 标题栏中的返回标题，默认其值为title属性所指定的值
headerTruncatedBackTitle - 返回标题不能显示时（比如返回标题太长了）显示此标题，默认为 “Back”
headerRight - 头部右边组件
headerLeft - 头部左边组件
headerStyle - 头部组件的样式
headerTitleStyle - 头部标题的样式
headerBackTitleStyle - 头部返回标题的样式
headerTintColor - 头部颜色
headerPressColorAndroid - Android 5.0 以上MD风格的波纹颜色
gesturesEnabled - 否能侧滑返回， iOS 默认 true ， Android 默认 false

参数 StackNavigatorConfig

该参数为导航器的相关配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等

const StackNavigatorConfig = {
    initialRouteName: 'Home',
    initialRouteParams: {initPara: '初始页面参数'},
    navigationOptions: {
        title: '标题',
        headerTitleStyle: {fontSize: 18, color: '#666666'},
        headerStyle: {height: 48, backgroundColor: '#fff'},
    },
    paths: 'page/main',
    mode: 'card',
    headerMode: 'screen',
    cardStyle: {backgroundColor: "#ffffff"},
    transitionConfig: (() => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    })),
    onTransitionStart: (() => {
        console.log('页面跳转动画开始');
    }),
    onTransitionEnd: (() => {
        console.log('页面跳转动画结束');
    }),
};
initialRouteName - 导航器组件中初始显示页面的路由名称，如果不设置，则默认第一个路由页面为初始显示页面
initialRouteParams - 给初始路由的参数，在初始显示的页面中可以通过 this.props.navigation.state.params 来获取
navigationOptions - 路由页面的配置选项，它会被 RouteConfigs 参数中的 navigationOptions 的对应属性覆盖。
paths - 路由中设置的路径的覆盖映射配置
mode - 页面跳转方式，有 card 和 modal 两种，默认为 card ：
       card - 原生系统默认的的跳转
       modal - 只针对iOS平台，模态跳转
headerMode - 页面跳转时，头部的动画模式，有 float 、 screen 、 none 三种：
       float - 渐变，类似iOS的原生效果
       screen - 标题与屏幕一起淡入淡出
       none - 没有动画
cardStyle - 为各个页面设置统一的样式，比如背景色，字体大小等
transitionConfig - 配置页面跳转的动画，覆盖默认的动画效果
onTransitionStart - 页面跳转动画即将开始时调用
onTransitionEnd - 页面跳转动画一旦完成会马上调用

页面的配置选项navigationOptions通常还可以在对应页面中去静态配置，比如在HomePage页面中：

export default class HomePage extends Component {

    // 配置页面导航选项
    static navigationOptions = ({navigation}) => ({
        title: 'HOME',
        titleStyle: {color: '#ff00ff'},
        headerStyle:{backgroundColor:'#000000'}
    });

    render() {
        return (
            <View></View>
        )
    };
}

同样的，在页面中采用静态的方式配置navigationOptions中的属性，会覆盖StackNavigator构造函数中两个参数RouteConfig和StackNavigatorConfig中配置的navigationOptions里面对应的属性。navigationOptions中属性的优先级是：

页面中静态配置>RouteConfig>StackNavigatorConfig

有了RouteConfig和StackNavigationConfig两个参数后，我们就可以构造出一个导航器组件了。直接引用该组件：

const Navigator = createStackNavigator(RouteConfigs, StackNavigatorConfig);

export default class MainComponent extends Component {
    render() {
        return (
            <Navigator/>
        )
    };
}

现在我们已经配置好了导航器和对应的路由页面了，但是要完成页面之间的跳转，还需要navigation.

navigation

在导航器中的每一个页面，都有navigation属性，该属性有一下几个属性/方法：

navigate - 跳转到其他页面，这个方法有三个参数

        — routeName 导航器中配置的路由名称

        — params 传递参数到下一个页面

        — action action

        比如： this.props.navigation.navigate('Find', {param: 'i am the param'});

state - 当前页面导航器的状态

        state 里面包含有传递过来的参数 params 、 key 、路由名称 routeName 

setParams - 更改路由的参数

       更改当前页面路由的参数，比如可以用来更新头部的按钮或者标题 比如：      

       componentDidMount() {
           this.props.navigation.setParams({param:'i am the new param'})
        }


goBack - 返回上一页面，可以传递传输也可以不传
dispatch - 发送一个action

TabNavigator

就是选项卡，现在主要用到的有两种顶部标签栏（createMaterialTopTabNavigator）和底部标签栏（createBottomTabNavigator），它们的构造函数：

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig);

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig);

api和 StackNavigator 类似，参数 RouteConfigs 是路由配置，参数 TabNavigatorConfig是Tab选项卡配置。

TabNavigatorConfig

tabBarComponent - Tab选项卡组件，设置后会覆盖掉默认的标签栏组件
tabBarPosition - Tab选项卡的位置，有 top 或 bottom 两个值
swipeEnabled - 是否可以滑动切换Tab选项卡
animationEnabled - 点击Tab选项卡切换界面是否需要动画
lazy - 是否懒加载页面
initialRouteName - 初始显示的Tab对应的页面路由名称
order - 用路由名称数组来表示Tab选项卡的顺序，默认为路由配置顺序
paths - 路径配置
backBehavior - androd点击返回键时的处理，有 initialRoute 和 none 两个值
initailRoute - 返回初始界面
none - 退出
tabBarOptions - Tab配置属性，用在 TabBarTop 和 TabBarBottom 时有些属性不一致：
用于 TabBarTop 时：
activeTintColor - 选中的文字颜色
inactiveTintColor - 未选中的文字颜色
showIcon - 是否显示图标，默认显示
showLabel - 是否显示标签，默认显示
upperCaseLabel - 是否使用大写字母，默认使用
pressColor - android 5.0以上的MD风格波纹颜色
pressOpacity - android 5.0以下或者iOS按下的透明度
scrollEnabled - 是否可以滚动
tabStyle - 单个Tab的样式
indicatorStyle - 指示器的样式
labelStyle - 标签的样式
iconStyle - icon的样式
style - 整个TabBar的样式
用于 TabBarBottom 时：
activeTintColor - 选中Tab的文字颜色
activeBackgroundColor - 选中Tab的背景颜色
inactiveTintColor - 未选中Tab的的文字颜色
inactiveBackgroundColor - 未选中Tab的背景颜色
showLabel - 是否显示标题，默认显示
style - 整个TabBar的样式
labelStyle - 标签的样式
tabStyle - 单个Tab的样式