開始戰鬥

從react到react native, 已經走過許多時間。react native是一個高效能的用javascript開發app的框架。
正好準備學一點react，然後覺得不如直接學習react-native，就開始了react-native之路，從環境搭建到一個小DEMO，花了不少時間，主要是下載太麻煩

準備工作

1. ide: 我選擇idea，習慣了
2. 電腦：win7的i5渣配置，所以先不打算進行ios開發
3. 沒有vpn，寬頻是交話費送的10M聯通寬頻，網速還行1m/s
4. 推薦給電腦安裝wox和everything(wox外掛就有)，方便尋找檔案

環境搭建

node環境

1. 下載安裝nodeJs（最新的就行），為了防止環境變數有問題，不要修改安裝目錄
2. 使用 node-v npm -v 看看有沒有安裝成功
   
3. 註冊淘寶映象

> npm config set registry https://registry.npm.taobao.org --global
> npm config set disturl https://npm.taobao.org/dist --global

1. 下載yarn，react-native預設使用yarn下載

  > npm i -g yarn
  > yarn -v

1. 給yarn註冊淘寶映象

> yarn config set
 
 registry https://registry.npm.taobao.org --global
> yarn config set disturl https://npm.taobao.org/dist --global 

react-native安裝

1. 使用yarn下載react-native-cli

> yarn global add react-native-cli
> react-native --version

1. 建立專案,一直等待下載完成，生成的目錄還是很清晰的

> yarn-native init rnDemo 

1. 試著執行專案

> cd rnDemo
> npm start

命令列顯示，8081埠開啟服務。在瀏覽器輸入localhost:8081,顯示React Native packager is running.，說明服務還是通暢的。可咱們要做安卓專案！所以繼續使用命令列

> react-native run-android

不出意外會挺慢，因為要下載gradle（gradle是安卓專案常用的構建工具，用來管理jar包和執行任務）和jar包，命令列會提示在此url下載檔案Download https://jcenter.bintray.com/com/android/tools/annotations/25.2.3/annotations-25.2.3.jar
4. 因為網路的問題，所以給gradle配置阿里雲maven（java常用的包管理工具，有一個下載的倉庫，但很慢）映象。進入.gradle資料夾，一般在C:\Users\Administrator\.gradle，使用wox就簡單多了

在 .gradle 資料夾裡面新建 init.gradle 檔案，並寫入下面程式碼，或點選下載init.gradle

allprojects{
    repositories {
        def REPOSITORY_URL = 'http://maven.aliyun.com/nexus/content/groups/public/'
        all { ArtifactRepository repo ->
            if(repo instanceof MavenArtifactRepository){
                def url = repo.url.toString()
                if (url.startsWith('https://repo1.maven.org/maven2') || url.startsWith('https://jcenter.bintray.com/')) {
                    project.logger.lifecycle "Repository ${repo.url} replaced by $REPOSITORY_URL."
                    remove repo
                }
            }
        }
        maven {
            url REPOSITORY_URL
        }
    }
}

1. 繼續執行命令react-native run-android

> react-native run-android

可以看到下載速度快了好多，但最後會發現報錯SDK location not found，這是因為沒有安裝 android sdk ，接下來配置 android環境

android開發環境配置

1. 安裝java環境，搜一下有N多教程
2. 下載android studio 沒有翻牆的話推薦使用網盤下載
3. 安裝android studio 推薦使用預設安裝一直點選next
4. 第一次啟動會進入下面介面
   
   
   • standard 標準配置，推薦第一次安裝使用能夠
   • custom 選擇安裝， 可以自己定製安裝選項
     由於是第一此安裝就直接選用預設的standard安裝，但是react-native官網推薦custom
5. 記得勾選Android Virtual Device，一直next，最後點選finished等待下載完成
   

環境變數

在電腦環境變數設定裡面，點選新建，ANDROID_HOME sdk路徑

然後再到環境變數 path 裡面新增類似這樣
C:\Users\Administrator\AppData\Local\Android\Sdk\tools
C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools
一定注意路徑的正確性

再次執行

1. 執行react-native run-android

> react-native run-android

又提示報錯關於 [Android SDK Platform 23, Android SDK Build-Tools 23.0.1].， 這是由於少了build-tools 23.0.1, 在sdk manager裡面安裝就行了


點選finished

1. 執行react-native run-android

> react-native run-android

提示報錯com.android.builder.testing.api.DeviceException: No connected devices!, 由於沒連上裝置導致的錯誤

連線裝置

adb（連線devices的驅動）可以通過模擬器和真機進行，android studio帶的模擬器不怎麼好用，所以我選擇用強大的genymotion進行開發

下載genymotion免費版並啟動

1. 由於genymotion依賴virtualbox，下載安裝virtualbox就行了
2. 以上安裝好之後開啟genymotion，根據提示新增一個裝置並執行該安卓模擬器
   
3. 安裝完畢，選擇一個新增好的虛擬機器，並啟動。 糟糕，不知什麼原因報錯了。
   
   碰到這種報錯不用怕，開啟virtualBox，直接啟動安裝好的虛擬機器。

可以看出來是virtualBox的配置有錯誤，那就開啟配置資訊

跟隨黃色提示配置好virtualBox,繼續啟動在genymotion裡面新增的裝置，完美!
   
4. 在genymotion裡面配置sdk路徑
   
5. 如果還是提示連線不上裝置，就用adb連線一下

> adb devices
> adb connect 127.0.0.1
> adb devices

開始開發

1. 各種配置都設定好了，繼續執行react-native run-android
2. 尼瑪又是error,這次明顯的看出提示沒有連線上js Service,得手動連線了
   
   點選選單 -> Dev Setting -> Debug server host


然後返回，reload一下

出現成功介面，可以愉快的開發了
   
   注意：在選單裡面點選 Enable Hot Reloading，這樣就可以儲存後實時重新整理了

正式開發，就寫一個簡單的底部導航路由

> yarn add react-native-tab-navigator

修改index.android.js,給入口少擱點東西，不然看著噁心

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

import RootApp from './app/RootApp'

AppRegistry.registerComponent('rnDemo', () => RootApp); // rnDemo是專案的名稱

在根目錄新建資料夾app，在app裡面新建 RootApp.js、components/Home.js、components/Nice.js

app/RootApp.js

import React, {Component} from 'react'
import {
  View,
  StyleSheet
} from 'react-native'
import TabNavigator from 'react-native-tab-navigator'
import Home from './components/Home'
import Nice from './components/Nice'
import TabNavigatorItem from "react-native-tab-navigator/TabNavigatorItem";

export default class RootApp extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: 'home'
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <TabNavigator>
          <TabNavigatorItem
            title="Home"
            onPress={() => this.setState({selectedTab: 'home'})}
            selected={this.state.selectedTab === 'home'}>
            <Home/>
          </TabNavigatorItem>
          <TabNavigatorItem
            title="Nice"
            onPress={() => this.setState({selectedTab: 'nice'})}
            selected={this.state.selectedTab === 'nice'}>
            <Nice/>
          </TabNavigatorItem>
        </TabNavigator>
      </View>
    )
  }
}

let styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ccc'
  }
});

app/components/Home.js

import React, {Component} from 'react'
import {
  Text
} from 'react-native'

export default class Home extends Component {
  render() {
    return (
      <Text>
        我是Home
      </Text>
    )
  }
}

app/components/Nice.js

import React, {Component} from 'react'
import {
  Text
} from 'react-native'

export default class Nice extends Component {
  render() {
    return (
      <Text>
        我是Nice
      </Text>
    )
  }
}

大功告成