ReactNative学习第五天 项目Header+顶部滑动切换

昨天我们学了WebStorm安装以及做了项目顶部效果

 

 今天我们要做一个顶部Tab切换

 所用到的第三方库为react-native-scrollable-tab-view

 

 一、当然是先nmp

 cd 到项目目录

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

 

 二、创建文件

 在根目录创建home文件夹,在home文件夹里创建Home.js,HomeContent.js,然后把Header.js移到home里面来

 

Home.js

 

 'use strict';

 

 import React from 'react';

 import {

     AppRegistry,

     StyleSheet,

     View

 } from 'react-native';

 

 import Header from './Header';

 import HomeContent from './HomeContent';

 

 export default class Home extends React.Component {

     render() {

         return (

             <View>

                 <Header/>

                 <HomeContent/>

             </View>

         );

     }

 }

 

 HomeContent.js

 

 'use strict';

 

 import React from 'react';

 import {

     AppRegistry,

     StyleSheet,

     Text,

     View

 } from 'react-native';

 

 // import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';

 

 const ScrollableTabView = require('react-native-scrollable-tab-view');

 export default class HomeContent extends React.Component {

     render() {

         return (

             <View>

                 <ScrollableTabView>

                     <Text tabLabel="推荐">1111</Text>

                     <Text tabLabel="热门">2222</Text>

                     <Text tabLabel="最新更新">3333</Text>

                 </ScrollableTabView>

             </View>

         );

     }

 }

 

 三、在index.ios.js里引用

 

 import Home from './home/Home'

 

 export default class NewsProject extends Component {

    render() {

        return (

            <Home>

            </Home>

        );

    }

 }

 

 看看效果

 

 有一个问题,就是内容部分不能随意滑动,并且内容文字显示不出来,今天弄了一下午都没弄懂,只能明天看了。