ReactNative 初始化

之前走了很多弯路，各种问题，原来初始化有问题

一、安装 ReactNativeCli

npm i -g react-native-cli

二、初始化应用

比如新起一个项目叫 demo

npx react-native init demo

初始化之后，项目内容是这样的，npm 包也已经安装好了

F:\github\demo
λ ll
total 424
drw-rw-rw-    2 Administrator 0      0 2021-08-13 13:34 __tests__/
drw-rw-rw-    5 Administrator 0   4096 2021-08-13 13:40 android/
-rw-rw-rw-    1 Administrator 0   2465 2021-08-13 13:34 App.js
-rw-rw-rw-    1 Administrator 0     45 2021-08-13 13:34 app.json
-rw-rw-rw-    1 Administrator 0     77 2021-08-13 13:34 babel.config.js
-rw-rw-rw-    1 Administrator 0    183 2021-08-13 13:34 index.js
drw-rw-rw-    5 Administrator 0      0 2021-08-13 13:34 ios/
-rw-rw-rw-    1 Administrator 0    299 2021-08-13 13:34 metro.config.js
drw-rw-rw-  617 Administrator 0  98304 2021-08-13 13:37 node_modules/
-rw-rw-rw-    1 Administrator 0    670 2021-08-13 13:37 package.json
-rw-rw-rw-    1 Administrator 0 304126 2021-08-13 13:37 yarn.lock

package.json 的内容是

{
  "name": "demo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "17.0.1",
    "react-native": "0.64.2"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/runtime": "^7.15.3",
    "@react-native-community/eslint-config": "^3.0.0",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "jest": "^27.0.6",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

三、运行即可

比如需要运行在模拟器 Android 中，需要你提前：

  • 安装好 JDK，将java bin 目录添加到 path 中
  • 安卓开发环境 SDK，将整个SDK 目录和 plarform-tool 目录添加到 path 中
  • 下载好模拟器，打开，或者使用真机，​​adb devices​​ 能看到开启的设备

执行运行程序即可

npm run android

执行界面中会显示这样：

ReactNative 初始化_android

模拟器中已经能看到程序运行中
ReactNative 初始化_android_02