1.項(xiàng)目結(jié)構(gòu)

代碼結(jié)構(gòu)

project.png

index.android.js和index.ios.js引用共有的控件為入口

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

import HomePage from "./js/pages/HomePage";
import NavigationBar from "./js/component/NavigationBar";

export default class rn_project extends Component {
  render() {
    return (
      <View style={styles.container}>
        <HomePage/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

AppRegistry.registerComponent('rn_project', () => rn_project);

2.引用的第三方庫(kù)

1.狀態(tài)欄

npm install react-native-tab-navigator --save 

2.導(dǎo)航欄
http://blog.csdn.net/jing85432373/article/details/54342756

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

3.自定義RefreshControll
http://www.reibang.com/p/9a4151852722

4.navigator 頁(yè)面跳轉(zhuǎn)
http://blog.csdn.net/huaheshangxo/article/details/50926946

5.復(fù)選框react-native-check-box

npm i react-native-check-box --save

import CheckBox from 'react-native-check-box'

6.Toast
https://github.com/crazycodeboy/react-native-easy-toast

npm i react-native-easy-toast --save

import Toast, {DURATION} from 'react-native-easy-toast'

7.可排序的listview
https://github.com/deanmcpherson/react-native-sortable-listview

npm install react-native-sortable-listview --save

備注：
--save會(huì)在package.json中會(huì)告訴依賴的項(xiàng)目

3.狀態(tài)欄StatusBar

頂部導(dǎo)航欄例子：

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    StatusBar,
    Platform,
    TouchableOpacity
} from 'react-native';

//會(huì)包含狀態(tài)欄鹅巍，還有頂部導(dǎo)航欄
export default class NavigationBar extends Component{
    render(){
        return <View style={styles.container}>
            <View style={styles.statusBar}>
                <StatusBar hidden={false} barStyle="light-content"/>
            </View>
            {/*頂部導(dǎo)航欄*/}
            <View style={styles.navBar}>
                <View style={styles.navBtn}></View>
                <View style={styles.titleWrapper}>
                    <Text style={styles.title}>熱門</Text>
                </View>
                <View style={styles.rightBtn}>
                    <TouchableOpacity
                        activeOpacity={0.7}>
                        <Image source={require('../../res/images/ic_search_white_48pt.png')} style={styles.navBtn}/>
                    </TouchableOpacity>

                    <TouchableOpacity
                        activeOpacity={0.7}>
                        <Image source={require('../../res/images/ic_more_vert_white_48pt.png')} style={styles.navBtn}/>
                    </TouchableOpacity>
                </View>
            </View>
        </View>;
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor:'#63B8FF',
        padding:5
    },
    statusBar:{
        height:Platform.OS === 'ios' ? 20 : 0
    },
    navBar:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center'
    },
    titleWrapper:{
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
        position:'absolute',
        left:40,
        right:40,
        bottom:0
    },
    title:{
        fontSize:16,
        color:'#FFF'
    },
    navBtn:{
        width:24,
        height:24
    },
    rightBtn:{
        flexDirection:'row',
        alignItems:'center',
        paddingRight:8
    }
});

4.搭建首頁(yè)的框架

1.HomePage
2.導(dǎo)入TabNavigator
3.安裝開(kāi)發(fā)手冊(cè)編寫tabnavigator的底部導(dǎo)航欄

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

import TabNavigator from 'react-native-tab-navigator'
import PopularPage from './PopularPage'

export default class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'popular', //默認(rèn)選中的選項(xiàng)卡
        };
    }

    render() {
        return <View style={styles.container}>
            <TabNavigator>
                <TabNavigator.Item
                    selected={this.state.selectedTab === 'popular'}
                    title="最熱"
                    selectedTitleStyle={{color: '#63B8FF'}}
                    renderIcon={() =>
                        <Image style={styles.icon} source={require('../../res/images/ic_popular.png')}/>}
                    renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_popular.png')}/>}
                    onPress={() => this.setState({selectedTab: 'popular'})}
                >
                    {/*選項(xiàng)卡對(duì)應(yīng)的頁(yè)面*/}
                    <PopularPage/>
                </TabNavigator.Item>

                <TabNavigator.Item
                    selected={this.state.selectedTab === 'trending'}
                    title="趨勢(shì)"
                    selectedTitleStyle={{color: '#63B8FF'}}
                    renderIcon={() =>
                        <Image style={styles.icon} source={require('../../res/images/ic_trending.png')}/>}
                    renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_trending.png')}/>}
                    onPress={() => this.setState({selectedTab: 'trending'})}
                >
                    <View style={{backgroundColor:'#0F0',flex:1}}></View>
                </TabNavigator.Item>

                <TabNavigator.Item
                    selected={this.state.selectedTab === 'favorite'}
                    title="收藏"
                    selectedTitleStyle={{color: '#63B8FF'}}
                    renderIcon={() =>
                        <Image style={styles.icon} source={require('../../res/images/ic_favorite.png')}/>}
                    renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_favorite.png')}/>}
                    onPress={() => this.setState({selectedTab: 'favorite'})}
                >
                    <View style={{backgroundColor:'#0F0',flex:1}}></View>
                </TabNavigator.Item>

                <TabNavigator.Item
                    selected={this.state.selectedTab === 'my'}
                    title="我的"
                    selectedTitleStyle={{color: '#63B8FF'}}
                    renderIcon={() =>
                        <Image style={styles.icon} source={require('../../res/images/ic_my.png')}/>}
                    renderSelectedIcon={() =>
                        <Image style={[styles.icon,{tintColor:'#63B8FF'}]} source={require('../../res/images/ic_my.png')}/>}
                    onPress={() => this.setState({selectedTab: 'my'})}
                >
                    <View style={{backgroundColor:'#00F',flex:1}}></View>
                </TabNavigator.Item>
            </TabNavigator>
        </View>;
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    icon: {
        width: 26,
        height: 26
    }
});

備注：tintColor：圖片和文字保持一樣的顏色
4.編寫其中一個(gè)頁(yè)面PopularPage：
使用scrollable-tab

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

import NavigationBar from "../component/NavigationBar"
import ScrollableTabView from "react-native-scrollable-tab-view"

//"最熱"是包含在掖桦，HomePage頁(yè)面
//"最熱"頁(yè)面包含村缸，NavigationBar

export default class PopularPage extends Component{
    render(){
        return <View style={styles.container}>
            <NavigationBar/>
            <ScrollableTabView
                tabBarBackgroundColor="#63B8FF"
                tabBarActiveTextColor="#FFF"
                tabBarInactiveTextColor="#F5FFFA"
                tabBarUnderlineStyle={{backgroundColor:"#E7E7E7",height:2}}>
                <Text tabLabel='IOS'/>
                <Text tabLabel='Android'/>
                <Text tabLabel='Java'/>
                <Text tabLabel='JavaScript'/>
            </ScrollableTabView>
        </View>;
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1
    }
});