手记

『React Navigation 3x系列教程』createMaterialTopTabNavigator开发指南

2019-01-03 21:58:359111浏览

CrazyCodeBoy

4实战 · 53手记 · 44推荐

期待已久的新教程上线啦！解锁React Native开发新姿势，一网打尽React Native最新与最热技术，点我Get!!!

createMaterialTopTabNavigator

createBottomTabNavigator相当于iOS里面的TabBarController，屏幕下方的标签栏。如图：

createMaterialTopTabNavigator API

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig):

  • RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。
  • TabNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。

从createMaterialTopTabNavigator API上可以看出createMaterialTopTabNavigator支持通过RouteConfigs和 TabNavigatorConfig两个参数来创建createMaterialTopTabNavigator导航器。

RouteConfigs

RouteConfigs支持三个参数screen、path以及navigationOptions；

  • screen(必选)：指定一个 React 组件作为屏幕的主要显示内容，当这个组件被TabNavigator加载时，它会被分配一个navigation prop。
  • path(可选)：用来设置支持schema跳转时使用，具体使用会在下文的有关Schema章节中讲到；
  • navigationOptions(可选)：用以配置全局的屏幕导航选项如：title、headerRight、headerLeft等；

TabNavigatorConfig

  • tabBarComponent：指定TabNavigator的TabBar组件；
  • tabBarPosition: 用于指定TabBar的显示位置，支持’top’ 与 'bottom’两种方式；
  • swipeEnabled : 是否可以左右滑动切换tab；
  • lazy - 默认值是 false。如果是true，Tab 页只会在被选中或滑动到该页时被渲染。当为 false 时，所有的 Tab 页都将直接被渲染；（可以轻松实现多Tab 页面的懒加载）；
  • optimizationsEnabled -是否将 Tab 页嵌套在到 中。如果是，一旦该 Tab 页失去焦点，将被移出当前页面, 从而提高内存使用率。
  • animationEnabled : 切换页面时是否有动画效果。
  • initialLayout : 包含初始高度和宽度的可选对象可以被传递以防止react-native-tab-view呈现中的一个帧延迟；
  • tabBarOptions: 配置TaBar下文会详细讲解；
  • initialRouteName : 默认页面组件，TabNavigator显示的第一个页面；
  • order: 定义tab顺序的routeNames数组。
  • paths: 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
  • backBehavior: 后退按钮是否会导致标签切换到初始tab？ 如果是，则设切换到初始tab，否则什么也不做。 默认为切换到初始tab。

tabBarOptions（tab配置）

  • activeTintColor: 设置TabBar选中状态下的标签和图标的颜色；
  • inactiveTintColor: 设置TabBar非选中状态下的标签和图标的颜色；
  • showIcon: 是否展示图标，默认是false；
  • showLabel: 是否展示标签，默认是true；
  • upperCaseLabel - 是否使标签大写，默认为true。
  • tabStyle: 设置单个tab的样式；
  • indicatorStyle: 设置 indicator(tab下面的那条线)的样式；
  • labelStyle: 设置TabBar标签的样式；
  • iconStyle: 设置图标的样式；
  • style: 设置整个TabBar的样式；
  • allowFontScaling: 设置TabBar标签是否支持缩放，默认支持；
  • pressColor -Color for material ripple（仅支持 Android >= 5.0；
  • pressOpacity -按下标签时的不透明度（支持 iOS 和 Android < 5.0）；
  • scrollEnabled -是否支持 选项卡滚动

eg:

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,
  },
  style: {
    backgroundColor: 'blue',
  },
}

navigationOptions（屏幕导航选项）

createMaterialTopTabNavigator支持的屏幕导航选项的参数有：

  • title: 可以用作headerTitle和tabBarLabel的备选的通用标题。
  • swipeEnabled：是否允许tab之间的滑动切换，默认允许；
  • tabBarIcon: 设置TabBar的图标；
  • tabBarLabel: 设置TabBar的标签；
  • tabBarOnPress: Tab被点击的回调函数，它的参数是一保函一下变量的对象：
    • navigation：页面的 navigation props
    • defaultHandler: tab press 的默认 handler
  • tabBarAccessibilityLabel：选项卡按钮的辅助功能标签。 当用户点击标签时，屏幕阅读器会读取这些信息。 如果您没有选项卡的标签，建议设置此项；
  • tabBarTestID：用于在测试中找到该选项卡按钮的 ID；

【案例1】使用createMaterialTopTabNavigator做界面导航、配置navigationOptions

第一步：创建一个createMaterialTopTabNavigator类型的导航器

export const MaterialTopTabNavigator = createMaterialTopTabNavigator({//在这里配置页面的路由
        Page1: {
            screen: Page1,
            navigationOptions: {
                tabBarLabel: 'Page10',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={'ios-home'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
        Page4: {
            screen: Page4,
            navigationOptions: {
                tabBarLabel: 'Page2',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={'ios-people'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
        Page3: {
            screen: Page3,
            navigationOptions: {
                tabBarLabel: 'Page3',
                tabBarIcon: ({tintColor, focused}) => (
                    <Ionicons
                        name={'ios-chatboxes'}
                        size={26}
                        style={{color: tintColor}}
                    />
                ),
            }
        },
    },
    {
        tabBarOptions: {
            tabStyle: {
                minWidth: 50
            },
            upperCaseLabel: false,//是否使标签大写，默认为true
            scrollEnabled: true,//是否支持 选项卡滚动，默认false
            // activeTintColor: 'white',//label和icon的前景色 活跃状态下（选中）
            // inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下（未选中）
            style: {
                backgroundColor: '#678',//TabBar 的背景颜色
            },
            indicatorStyle: {
                height: 2,
                backgroundColor: 'white',
            },//标签指示器的样式
            labelStyle: {
                fontSize: 13,
                marginTop: 6,
                marginBottom: 6,
            },//文字的样式
        },
    }
)

第二步：配置navigationOptions：

TabNavigator的navigationOptions有两个关键的属性，tabBarLabel标签与tabBarIcon图标：

Page2: {
    screen: Page2,
    navigationOptions: {
        tabBarLabel: 'Page2',
        tabBarIcon: ({tintColor, focused}) => (
            <Ionicons
                name={focused ? 'ios-people' : 'ios-people-outline'}
                size={26}
                style={{color: tintColor}}
            />
        ),
    }
},

在上述代码中使用了react-native-vector-icons的矢量图标作为Tab的显示图标，tabBarIcon接收一个React 组件，大家可以根据需要进行定制：

  • tintColor: 当前状态下Tab的颜色；
  • focused: Tab是否被选中；

第三步：界面跳转

 const {navigation} = this.props;
 ...
 <Button
    title="跳转到页面4"
    onPress={() => {
        navigation.navigate("Page4",{ name: 'Devio' })
    }}
/>

代码解析：

页面跳转可分为两步：

    1. 获取navigation：
    const {navigation} = this.props;
    1. 通过navigate(routeName, params, action)进行页面跳转：
     navigation.navigate('Page2');
 navigation.navigate('Page3',{ name: 'Devio' });

    这里在跳转到Page3的时候传递了参数{ name: 'Devio' }；

【高级案例】react-navigation的高级应用

在使用react-navigation时往往有些需求通过简单的配置是无法完成的，比如：

  • 动态配置createMaterialTopTabNavigator：官方只提供了TabNavigator中的页面的静态配置方式，如果TabNavigator中的页面不固定，需要动态生成那么需要怎么做呢？
  • 动态配置createMaterialTopTabNavigator的样式：通过官方的文档是无法实现动态改变TabNavigator的样式的，比如：修改显示的文字，修改字体颜色，修改图标等等；
  • 多层嵌套后路由个性化定制：createMaterialTopTabNavigator被包裹后在TabNavigator中的页面是无法借助navigation跳转到外层StackNavigator中的页面的，这种应用场景很多，尤其是你需要定制TabNavigator的时候；
  • 初始化传参：如何在设置页面的时候传递参数呢？

类似上述的应用场景有很多，大家可以通过与本教程配套的最新版React Native+Redux打造高质量上线App视频教程进行进一步学习react-navigation的更多高级应用。

相关标签
React Native
8人推荐
随时随地看视频
慕课网APP

热门评论

console.log('thank you very much ! Mr JIA')


很好理解，不错

查看全部评论

相关阅读

『React Navigation 3x系列教程』createSwitchNavigator开发指南