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

在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***/
    20, }}
      renderTabBar={() => }
    >
      'Tab #1'>My
      'Tab #2'>favorite
      'Tab #3'>project
    
    /****核心2 end***/

    );
  }
}

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