react-native实现Tab切换

方法一：react-native-scrollable-tab-view

步骤：

1.安装下载：

npm install react-native-scrollable-tab-view --save

2.引入：

import ScrollableTabView , { ScrollableTabBar, DefaultTabBar } from "react-native-scrollable-tab-view"

3.使用：（render中直接使用即可）

<ScrollableTabView
    // style={styles.container}
    renderTabBar={()=> <DefaultTabBar />}
    tabBarBackgroundColor='#fff'
    tabBarActiveTextColor='#5ebfff'
    tabBarInactiveTextColor='#333'
    // tabBarUnderlineStyle={styles.lineStyle}
>
    <Text  tabLabel='@我的'>@我的11</Text >
    <Text  tabLabel='回复我的'> 回复我的11</Text >
</ScrollableTabView>

方法二：react navigation

步骤：

1.引入：（react navigation中的组件以及所要跳转的组件)

import {
  createAppContainer,
  createMaterialTopTabNavigator
} from 'react-navigation';
import { ReplyMeNewVisit } from './new/ReplyMeNewVisit'
import { AtMeNewVisit } from './new/AtMeNewVisit'

2.在要用到tab的主页面中进行定义一个路由：

const TabContent= createMaterialTopTabNavigator (
{
  AtMeNewVisitTab: {
    screen: AtMeNewVisit,
    navigationOptions: {
      tabBarLabel: '@我的',
    }
  },
  ReplyMeNewVisitTab: {
    screen: ReplyMeNewVisit,
      tabBarLabel: '回复我的',
    }
  }, 
},
{
  initialRouteName: 'AtMeNewVisitTab',
  swipeEnabled: true,
  animationEnabled: true,
  lazy: false,
  tabBarPosition:'top',
 }
)

3.仍旧在该页面中：定义一个容器：

const TabInNewMeg = createAppContainer(TabContent);

4.在tab切换的子页面中分别配置：

static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;
    return {
      tabBarLabel: '@我的',
    }
  }

5.在tab的主页面中的class的render中引用：

<TabInNewMeg/>