React Native第1天——環境配置及知識體系

我（web+android開發經驗）學習React Native過程當中接觸的知識點和學習的線路圖。

React Native第1天——環境配置及知識體系

• 掌握環境配置及運行hello world

• 掌握開發流程，會基本的靜態佈局（未交互）

React Native第2天——底層原理了解

• 瞭解React Native架構（Java層、C++層、Js層）

• 瞭解基本目錄結構及經常使用命令的工做

React Native第3天——經常使用組件和常見Q&A

• 掌握經常使用組件

• 掌握頁面切換、網絡請求方法

• 實踐開發一個實現基本功能的app

附：React-Native學習資料

---

主要的幾個命令

npm install -g react-native-cli //Create a React Native project

react-native init AwesomeProject //初始化項目

cd AwesomeProject

cd C:\rn\app\AwesomeProject

react-native start //啓動服務，實際執行 'node node_modules/react-native/local-cli/cli.js start'

react-native run-android //另外開啓一個DOS窗口，啓動應用

能夠訪問 http://localhost:8081/index.android.bundle?platform=android

鏈接電腦的手機，已經安裝上apk，開始好好玩耍吧

realse版本離線發佈

設置gradle變量

一、把my-release-key.keystore文件放到你工程中的android/app文件夾下。

二、編輯~/.gradle/gradle.properties，添加以下的代碼（注意把其中的****替換爲相應密碼）

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore

MYAPP_RELEASE_KEY_ALIAS=my-key-alias

MYAPP_RELEASE_STORE_PASSWORD=*****

MYAPP_RELEASE_KEY_PASSWORD=*****

添加簽名到應用的gradle配置文件

編輯你工程目錄下的android/app/build.gradle，添加以下的內容：

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

生成發行APK包

若是你在android/app下有一個react.gradle#

只要在終端下運行如下命令：

mkdir -p android/app/src/main/assets

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

cd android && ./gradlew assembleRelease

在android/app/build/outputs/apk/app-release.apk中找到生成的APK文件。

學習步驟及資料

一、官方資料

http://facebook.github.io/react-native/docs/getting-started.html

二、win下環境配置

1）安裝Java('java -version'確認)

2）安裝SDK(設置環境變量'ANDROID_HOME')

3）安裝node('node -v'確認)

4）安裝'react-native'命令行工具React-native-cli

安裝最新的nodejs環境，安裝npm（電腦之前安裝過，坑已踩完?一路暢通呢）

http://www.cnblogs.com/meteoric_cry/p/4874517.html

http://blog.csdn.net/u011068702/article/details/49448043

http://www.alloyteam.com/2016/03/react-native-for-android-windows/#prettyPhoto

三、Android SDK環境變量

系統環境變量新建ANDROID_HOME（右鍵點擊個人電腦–>屬性–>高級–>環境變量–>系統變量–>新建，注意是「系統變量」而不是「Administrator的用戶變量」）

1）ANDROID_HOME=E:\android-sdk（android sdk所在目錄）。

2）在 path 中加入 %ANDROID_HOME%\tools ，注意不要改變其餘文件路徑，只需在分號後面加入。

http://www.yoyong.com/archives/tag/android-%E9%85%8D%E7%BD%AE%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F

四、hello world問題解決及獨立安裝原理

http://www.race604.com/rn-android-standalone-apk/

http://www.alloyteam.com/2015/10/react-native-android-steps-on-tour/

五、手動打開chrome調試

http://localhost:8081/debugger-ui

http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E5%BA%94%E7%94%A8%E8%AE%BE%E5%A4%87%E8%BF%90%E8%A1%8Crunning%E4%BB%A5%E5%8F%8A%E8%B0%83%E8%AF%95debugging/

六、開發工具

Atom

（官方推薦，安裝了Nuclide插件項目文件都看不了啦，沒有沒有找到語法提示，沒有多折騰，換WebStorm）

http://hahack.com/codes/learn-react-native-for-android-01/

http://www.jianshu.com/p/5d772d2c6f5e

WebStorm

（官方下載最新版本，註冊服務器填http://idea.qinxi1992.cn就能夠）

http://reactnative.cn/post/539

http://www.w3ctech.com/topic/1496

七、知識體系

Node.js基礎、JSX語法基礎、Flexbox佈局

http://blog.csdn.net/yuanguozhengjust/article/details/50468561

八、學習教程

http://www.lcode.org/react-native/

http://blog.csdn.net/yuanguozhengjust?viewmode=contents

http://react-china.org/t/react-native/3169

九、flex佈局

http://hammercui.github.io/post/react-native%E5%9F%BA%E7%A1%80%EF%BC%9Aflexbox%E5%B8%83%E5%B1%80%E5%AE%9E%E6%88%98/

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://my.oschina.net/jack088/blog/598223

十、jsx使用

http://vczero.github.io/react_native/%E7%AC%AC6%E7%AF%87jsx%E5%9C%A8react-native%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8.html

https://facebook.github.io/react/docs/jsx-in-depth-zh-CN.html