初入React Native，雖然是JS語言但是寫法和思想大不相同，本著react.js能寫網站,native能寫跨平臺APP，所以直接學習了react native方便以后的開發，react的思想和最初學的OC很像，把狀態與屬性給賦值給一個元素，這樣非常的..面向對象，不過react寫法很不同再加上ES6的新特性，所以記錄一下自己的學習過程，方便以后鞏固和加深印象。

Windows下環境配置：開發環境地址

遇到的問題：

1.python2：直接裝python2.7就好

2.Android Studio2.0或者更高版本，必須裝JDK（java Development Kit1.8或者更高版本，然后配置JAVA_HOME路徑）文檔詳細沒寫

3.node服務器自動啟動不了了（肯定是環境路徑問題修改出錯了）可以通過打開命令行進入軟件目錄輸入react-native start手動開啟node服務器

4.安卓模擬器用Genymotion，abd命令行需要進入我的電腦->屬性->高級系統設置->系統屬性->環境變量->新建Path（如果有Path則用‘；’與之前的Path隔開）->adb.exe路徑'SDK\platform-tools'

開始

1.react-navigation，建立導航

頁面跳轉和搭建TabBar，使用的是React Navigation組件，需要npm install --save react-navigation，頁面跳轉用

const router = StackNavigator({
    導航頁: {
        screen: tabBar
    },
    廣告頁: {
        screen: Ad
    },
    設置頁: {
        screen: Set
    }

});

TabBar用：

const tabBar = TabNavigator({
    首頁: {
        screen: Home,
        navigationOptions: {
            tabBarLabel: '首頁',
            tabBarIcon: ({
                tintColor,
                focused
            }) => (
                <Ionicons
         name={focused ? 'ios-home' : 'ios-home-outline'}
            selectedIconName="ios-home"
          size={20}
          style={{ color: tintColor }}
        />
            ),
        }
    },
    發現: {
        screen: Find,
        navigationOptions: {
            tabBarLabel: '發現',
            tabBarIcon: ({
                tintColor,
                focused
            }) => (
                <Ionicons
          name={focused ? 'ios-cube' : 'ios-cube-outline'}
          size={20}
           style={{ color: tintColor }}
        />
            ),
        }
    },
    我的: {
        screen: My,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({
                tintColor,
                focused
            }) => (
                <Ionicons
                name={focused ? 'ios-person' : 'ios-person-outline'}
      
          size={20}
            style={{ color: tintColor }} 
        />
            ),
        }
    },
}, {
    tabBarPosition: 'bottom',
    swipeEnabled: false, // 禁止左右滑動
    tabBarOptions: {
        activeTintColor: '#666699', // 文字和圖片選中顏色
        inactiveTintColor: '#CC9999', // 文字和圖片默認顏色
        showIcon: true, // android 默認不顯示 icon, 需要設置為 true 才會顯示
        indicatorStyle: {
            height: 0
        }, // android 中TabBar下面會顯示一條線，高度設為 0 后就不顯示線了， 不知道還有沒有其它方法隱藏？？？
        style: {
            backgroundColor: '#FFFF99', // TabBar 背景色
        },
        labelStyle: {
            fontSize: 12, // 文字大小
        },
    },
});

需要注意的是，需要把TabBar嵌套在StackNavigator里使用，不然進入第二頁下面導航欄任然不會消失，這點讓我覺得使用非常不爽，因為我理解TabBar邏輯上是最外一層，按鈕上每個首頁面再通過StackNavigator嵌套跳轉頁面，然而它是因為堆棧的緣故，如果TabBar放在表層，嵌套頁面永遠在TabBar下一級，不會蓋過TabBar，但是如果把TabBar嵌套在StackNavigator里的話，新打開的一頁就會占整屏幕，但是感覺這樣寫會對整個程序的路線非常模糊。（不過也許router方法會對程序線路管理有幫助？沒細看）

2.react-native-vector-icons：圖標地址

配置的東西有點多，不過寫的很詳細，一步步走就好

import Ionicons from 'react-native-vector-icons/Ionicons';
//首頁圖標配置    
首頁: {
        screen: Home,
        navigationOptions: {
            tabBarLabel: '首頁',
            tabBarIcon: ({tintColor,focused}) => (
       <Ionicons  name={focused ? 'ios-home' : 'ios-home-outline'}
                  selectedIconName="ios-home"
                  size={20}
                  style={{ color: tintColor }}
                      />
            ),
        }
    },

，

Paste_Image.png

丑陋的首頁以及跳轉，把最基礎的模型搭建好，之后就可以開始嘗試各種組件了~