rn 实现上下滑动选择列表_[RN] React Native 下实现底部标签（支持滑动切换）

上一篇文章

总结了不支持滑动切换的方法，此篇文章总结出 支持滑动 的方法

准备工作之类的，跟上文类似，大家可点击上文查看相关内容。

不同点在于 /src/App.js 下

主要使用 react-navigation 下的 createMaterialTopTabNavigator

所以也需要先安装 react-navigation

1)依赖版本如下：

"react-navigation": "^3.9.1",

2)代码如下：

import React from 'react';

import {Image} from 'react-native';

import {createAppContainer, createMaterialTopTabNavigator} from 'react-navigation';

//展示的页面

import Home from './Home';

import Contact from './Contact';

import Discover from './Discover';

import Mine from './Mine';

//Tab

const TabNavigator = createMaterialTopTabNavigator({

Home: {

screen: Home,//当前选项卡加载的页面

navigationOptions: {

tabBarLabel: '新闻',

tabBarIcon: ({tintColor, focused}) => (

source={focused ? require('./main_tab_home_icon_pressed.png') : require('./main_tab_home_icon.png')}

style={[{height: , width: }]}

/>

),

},

},

Contact: {

screen: Contact,