在react中如何使用tab组件-小白系列 es6_react tab加载不同组件-优快云博客

在react中如何使用tab组件-小白系列 es6

首先，在阅读本内容时，您应该建立起一个自己的react 项目。

如果没有，请走传送门，去建立自己第一个react项目

第一步：

加载第三方组件：
 npm install react-native-scrollable-tab-view --save

第二步：

在index.android.js代码中添加如下代码（index.ios.js同理）：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Text,
  AppRegistry
} from 'react-native';


 /****核心1 begin***/
import ScrollableTabView, {DefaultTabBar, } from 'react-native-scrollable-tab-view';
/****核心1 end***/

class HelloWorldApp extends Component {

  render() {

    return ( 


    /****核心2 begin***/
    <ScrollableTabView
      style={{marginTop: 20, }}
      renderTabBar={() => <DefaultTabBar />}
    >
      <Text tabLabel='Tab #1'>My</Text>
      <Text tabLabel='Tab #2'>favorite</Text>
      <Text tabLabel='Tab #3'>project</Text>
    </ScrollableTabView>
    /****核心2 end***/

    );
  }
}

AppRegistry.registerComponent('MyProject11', () => HelloWorldApp);