react - 1. 搭建环境 与 hello world

访问量: 183

最近, 我开始参与我们的手机APP了。 

项目是用react native 写的。 所以记录一下。 

入门很容易,有现成的中文文档:  https://reactnative.cn/docs/getting-started.html

搭建环境

目前是需要下载JDK 1.8   由于是android环境, 我选择自己的i5 16g 的台式机。用起来爽歪歪。 

node: 必须大于 8.3  , 我使用了10.9。  

python:  2.x  ,不能 3 以上。 所以我使用了 2.7  (下载:https://www.python.org/downloads/release/python-2715/)

之后执行命令

# 安装npm源
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

# 安装 react native 命令行工具
npm install -g yarn react-native-cli

# 设置yarn的源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

然后创建一个新项目: hello

react-native init hello

# 然后会看到一堆生成项目文件的消息。  很有意思。 

为gradle设置代理服务器:(如果你在国外可以跳过这一步。 否则在国内会遇到错误)

$ cat ~/.gradle/gradle.properties
systemProp.https.proxyHost=127.0.0.1
systemProp.https.proxyPort=1080
systemProp.http.proxyHost=127.0.0.1
systemProp.http.proxyPort=1080

然后执行命令:

$ react-native run-android

就可以看到项目跑起来了。 

项目的文件夹基本结构

/e/workspace/hello/
▸ android/
▸ ios/
▸ node_modules/
▸ screens/
  App.js
  app.json
  index.js
  package-lock.json
  package.json
  yarn.lock

几个需要注意的基本结构:

package.json: 整个项目的配置文件,定义了用到的第三方包等。 类似于Gemfile

android: 生成的文件夹。 一般情况用不到。 不要轻易修改。 

ios: 生成的文件夹, 一般情况用不到。 

node_modules: 不要放到git  代码中, 生成的文件夹

index.js  入口文件

App.js  代码文件。该文件被index.js调用。 可以认为是我们写入第一行react native代码的文件。

yarn.lock  使用yarn生成的临时文件

package-lock.json 使用npm 生成的临时文件

订阅/RSS Feed

Subscribe

分类/category