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