React Native mobile app 初探

之所以研究下React Native, 是因为官方的一句话：

---

A React Native app is a real mobile app
With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

---

本文记录下基础的步骤， 以android 为版本， 到apk生成。

先准备基础环境（略）, node 是用了nvm多版本控制工具。

D:\workspace_rn>node --version
v8.9.0
D:\workspace_rn>npm install -g yarn react-native-cli
D:\workspace_rn>java -version
java version "1.8.0_112"


安装 Android Studio
目前编译 React Native 应用需要的是Android 8.0 (Oreo)版本的 SDK
Android SDK Platform 26
Intel x86 Atom_64 System Image

1. 初始化一个新的project

D:\workspace_rn>react-native init AwesomeProject
This will walk you through creating a new React Native project in D:\workspace_rn\AwesomeProject
Using yarn v1.3.2
Installing react-native...
yarn add v1.3.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...

2.确保你先运行了AVD模拟器或者连接了真机，然后在你的项目目录中运行

3.运行项目到模拟器

D:\workspace_rn\AwesomeProject>react-native run-android


warning " > react-native@0.56.0" has unmet peer dependency "react@16.4.1".

===>Unable to resolve module `AccessibilityInfo` 了

https://stackoverflow.com/questions/48756550/unable-to-resolve-module-accessibilityinfo-when-trying-to-create-release-bund

4. 按照上面的链接， 可能是因为0.56 的版本原因， 故降低到0.55

npm uninstall react-native
npm install --save react-native@0.55.4

【run dos with Administrator of windows】
npm uninstall --save babel-preset-react-native
npm install --save babel-preset-react-native@4.0.0

react-native run-android

5.看到AVD中正确显示了app.js的首页内容。

image.png

6. 使用visual code 或编辑器修改代码

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native, Allan!</Text>
        <Text style={styles.instructions}>To get started, edit App.js, sure.</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

7. RR自动刷新了AVD界面， 速度还是很快的。

8. 编译apk(签名等略)

D:\workspace_rn\AwesomeProject\android>gradlew assembleRelease

output D:\workspace_rn\AwesomeProject\android\app\build\outputs\apk

9. 自动生成了 android studio的project.

   
   image.png

REF: https://reactnative.cn/docs/getting-started.html