react native 导航路由组件react-navigation的使用

 

navigation的几个难点和问题：

1.底部tab是否可以加上中间的大按钮？ 如果加上，如何触发事件？ js文件放哪？

2.navigation的登录注册页面。成功后应该不能返回刚刚的登录页面？清空页面栈？

3.登录成功跳转到大厅？意图页面？还是当前所在页？弹出model是不是可以解决所有问题？登录成功如何重刷当前页？

 

一、前言

在 React Native 中，官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换。 react-navigation 主要包括三个组件：

• TabNavigator 切换组件 ，用来实现同一个页面上不同界面的切换，即tab选项卡
• StackNavigator 导航组件，用于实现各个页面之间的跳转，即页面跳转（通过stack栈记录）
• DrawerNavigator 抽屉组件，可以实现侧滑的抽屉效果 

本次我们主要说说前两个，DrawerNavigator 笔者不曾使用

（一）、怎么使用navigation（入口和概览）

export default class Navigator extends Component {
　　render() {
　　　　return(
　　　　　　<Navigator />
　　　　)
　　}
}
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs)

 上面的StackNavigator就是react-navigation 的导航组件：

• StackNavigator 导航组件，用于实现各个页面之间的跳转，即页面跳转（通过stack栈记录）

那么它的两个参数  StackNavigator(StackRouteConfigs, StackNavigatorConfigs)  又是干啥的呢？

 

（二）、怎么使用StackNavigator

const StackRouteConfigs = {
    MainTab: {
        screen: MainTab,
        navigationOptions: ({navigation}) => ({
           //主页大厅的tab及其相关页面
        }),
    },
    Datail: {
        screen: DatailPage,
        navigationOptions: ({navigation}) => ({

        }),
    },
};

const StackNavigatorConfig = {
    initialRouteName: 'MainTab',    //默认先加载的页面
    navigationOptions: {    //路由页面的配置选项，可定义头部内容、样式
       
    },
    mode: 'card',    //页面跳转方式，card 表示原生系统默认的方式和 modal只针对iOS平台，模态跳转
    headerMode: 'screen',页面跳转时，头部的动画模式，有 float 、 screen 、 none 三种
};

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

 StackNavigatorConfigs参数表示导航器的配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等：

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 - 页面跳转动画一旦完成会马上调用

 

上面的MainTab表示大厅内的Tab内容

也就是：

• TabNavigator 切换组件 ，用来实现同一个页面上不同界面的切换，即tab选项卡

它怎么使用呢？？？

 

（三）、怎么使用TabNavigator

const MainTab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);

 

const TabNavigatorConfigs = {
    initialRouteName: 'Recommend',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    lazy: true,
    tabBarOptions: {
        activeTintColor: 'red',
        inactiveTintColor: '#999',
        showIcon: true,
        indicatorStyle: {height: 0},
        style: {
            backgroundColor: '#fff',
            height: (height*0.08 < 65) ? 65 : height*0.08,
            paddingVertical: (height*0.08 < 65) ? 5 : height*0.08/13,
        },
        labelStyle: {fontSize: 11},
    }
};

 

const TabRouteConfigs = {
    Attention: {
        screen: AttentionScreen,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '关注',
            tabBarIcon: ({focused, tintColor}) => (
                <Image source={focused ? LocalImage.AttentionSelectedImage : LocalImage.AttentionImage} style={{width: '33%'}} resizeMode='contain'> </Image>
            ),
        }),
    },
    Recommend: {
        screen: RecommendScreen,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '推荐',
            tabBarIcon: ({focused, tintColor}) => (
                <Image source={focused ? LocalImage.RecommendSelectedImage : LocalImage.RecommendImage} style={{width: '33%'}} resizeMode='contain'> </Image>
            ),
        }),
    },
    Library: {
        screen: LibraryScreen,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '仓库',
            tabBarIcon: ({focused, tintColor}) => (
                <Image source={focused ? LocalImage.LibrarySelectedImage : LocalImage.LibraryImage} style={{width: '33%'}} resizeMode='contain'> </Image>
            ),
        }),
    },
    Profile: {
        screen: ProfileScreen,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '我的',
            tabBarIcon: ({focused, tintColor}) => (
                <Image source={focused ? LocalImage.ProfileSelectedImage : LocalImage.ProfileImage} style={{width: '33%'}} resizeMode='contain'> </Image>
            ),
        }),
    },
};

 

TabNavigator 切换组件 TabNavigatorConfigs 的配置

tabBarComponent - Tab选项卡组件，有 TabBarBottom 和 TabBarTop 两个值，在iOS中默认为 TabBarBottom ，在Android中默认为 TabBarTop 。
TabBarTop - 在页面的顶部
TabBarBottom - 在页面的底部
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的样式

 

三、结语

暂时就这样