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

爱⌒轻易说出口 提交于 2019-12-09 09:13:30

 

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

 

上面的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的样式
TabNavigatorConfigs配置

 

三、结语

暂时就这样

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!