，最近剛開始學習RN，用這個做下筆記。

引用組件首字母必須要大寫，不然就會造成錯誤 Expected a component class,got[object Object]。

react-native-vector-icons用法
下載：
npm install react-native-vector-icons –save
react-native link react-native-vector-icons

代碼里使用
import Icon from ‘react-native-vector-icons/XXX’;

<Icon name={'md-home'}size={30}color={selected ? '#3e9ce9' : '#000000'}/>

react-native-tab-navigator的使用
下載：npm install react-native-tab-navigator –save

簡單的一個demo，使用react-native-vector-icons中的圖標，需要注意的是每個Item必須要返回一個視圖，不然會報錯。

import React, {Component} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';
//導入react-native-tab-navigator方式：
//cmd項目路徑下執行npm install react-native-tab-navigator --save
import TabNavigator from 'react-native-tab-navigator'
import Icon from 'react-native-vector-icons/FontAwesome'
export default class Tabbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Home'
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <TabNavigator>
                    <TabNavigator.Item
                        //設置選中的位置
                        selected={this.state.selectedTab === 'Home'}
                        //標題
                        title="首頁"
                        //標題樣式
                        titleStyle={styles.tabText}
                        //選中時標題文字樣式
                        selectedTitleStyle={styles.selectedTabText}
                        //圖標
                        renderIcon={() => <Icon name={'home'} size={30} color={this.state.selectedTab === 'Home' ? '#3e9ce9' : '#000000'} />}
                        //選中時圖標
                        renderSelectedIcon={() => <Icon name={'home'} size={30} color={this.state.selectedTab === 'Home' ? '#3e9ce9' : '#000000'} />}
                        //點擊Event
                        onPress={() => this.setState({ selectedTab: 'Home' })}>
                        <View style={styles.page0}>
                            <Text style={{fontSize:18,padding:15,color: 'blue'}}>This is Home Page</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'List'}
                        title="訂單"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Icon name={'list'} size={25} color={this.state.selectedTab === 'List' ? '#3e9ce9' : '#000000'} />}
                        renderSelectedIcon={() =>  <Icon name={'list'} size={25} color={this.state.selectedTab === 'List' ? '#3e9ce9' : '#000000'} />}
                        onPress={() => this.setState({ selectedTab: 'List' })}>
                        <View style={styles.page0}>
                            <Text style={{fontSize:18,padding:15,color: 'blue'}}>This is List Page</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Friend'}
                        title="朋友"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Icon name={'address-book'} size={25} color={this.state.selectedTab === 'Friend' ? '#3e9ce9' : '#000000'} />}
                        renderSelectedIcon={() => <Icon name={'address-book'} size={25} color={this.state.selectedTab === 'Friend' ? '#3e9ce9' : '#000000'} />}
                        onPress={() => this.setState({ selectedTab: 'Friend' })}>
                        <View style={styles.page1}>
                            <Text style={{fontSize:18,padding:15,color: '#fff'}}>This is Friend Page</Text>
                        </View>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'User'}
                        title="我的"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Icon name={'user'} size={27} color={this.state.selectedTab === 'User' ? '#3e9ce9' : '#000000'} />}
                        renderSelectedIcon={() => <Icon name={'user'} size={27} color={this.state.selectedTab === 'User' ? '#3e9ce9' : '#000000'} />}
                        onPress={() => this.setState({ selectedTab: 'User' })}>
                        <View style={styles.page1}>
                            <Text style={{fontSize:18,padding:15,color: '#fff'}}>This is User Page</Text>
                        </View>
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabText: {
        fontSize: 10,
        color: '#000000'
    },
    selectedTabText: {
        fontSize: 10,
        color: '#3e9ce9'
    },
    icon: {
        width: 22,
        height: 22
    },
    page0: {
        flex: 1,
        backgroundColor: 'yellow'
    },
    page1: {
        flex: 1,
        backgroundColor: 'blue'
    }
});

react-native-viewpager（圖片輪播）的使用
安裝：npm install react-native-viewpager –save

使用看Github上的示例：https://github.com/race604/react-native-viewpager

這里遇到兩個問題，具體見下圖:

第一個是當設置圖片顯示在頁面上方指定高度時，頁面滾動指示器的位置不會自動顯示在圖片下方，而是在頁面的最下方。第二個問題是選中的小圓點和沒選中的小圓點不在一個水平線上，解決方法是修改react-native-viewpager的源碼，具體代碼如下:
第一個問題修改ViewPager.js文件,修改過后的代碼如下:

第二個問題修改DefaultViewPageIndicator.js文件

curDot: {
    position: 'absolute',
    width: DOT_SIZE,
    height: DOT_SIZE,
    borderRadius: DOT_SIZE / 2,
    backgroundColor: '#80ACD0',
    margin: DOT_SAPCE,
    bottom: -4,//原來的值是0
  },

最后上效果圖: