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

import React from 'react';

import {Image}from 'react-native';

import {createAppContainer, createMaterialTopTabNavigator}from 'react-navigation';//展示的页面

import Home from './Home';

import Contactfrom './Contact';

import Discoverfrom './Discover';

import Minefrom './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: 24, width: 24}]}/>),

},

},

Contact: {

screen: Contact,

navigationOptions: {

tabBarLabel:'视频',

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

source={focused ? require('./main_tab_video_icon_pressed.png') : require('./main_tab_video_icon.png')}

style={[{height: 24, width: 24}]}/>),

},

},

Discover: {

screen: Discover,

navigationOptions: {

tabBarLabel:'图片',

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

source={focused ? require('./main_tab_image_icon_pressed.png') : require('./main_tab_image_icon.png')}

style={[{height: 24, width: 24}]}/>),

}

},

Mine: {

screen: Mine,

navigationOptions: {

tabBarLabel:'我的',

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

source={focused ? require('./main_tab_user_icon_pressed.png') : require('./main_tab_user_icon.png')}

style={[{height: 24, width: 24}]}/>),

}

},

}, {

swipeEnabled:true,

animationEnabled: true,

tabBarPosition: "bottom", //如果在顶部，就是 top

tabBarOptions: {

activeTintColor:'#45C018',

inactiveTintColor:'#111111',

showIcon:true, //是否显示图标, 默认为false

showLabel: true, //是否显示label

labelStyle: {

fontSize:12,

},

style: {

backgroundColor:'#fff',

borderTopWidth:0.5,

borderTopColor:'grey',

},

indicatorStyle: {

height:0, //不显示indicator

},

},

});

exportdefault createAppContainer(TabNavigator);