react-native初体验(1) — hello world

没有简介，直接开始干活吧。

默认阅读本文的你已经安装好 nodejs, windows用户需要升级yarn到最新版本。

并且设置安装源为国内的淘宝源:

npm config set registry https://registry.npm.taobao.org --global

初始化

开发过 react 的同学想必对于 create-react-app 并不陌生，这个cli工具大大简化了配置，让我们上手即可开发。

对于 react-native， facebook官方也放出了 create-react-native-app 工具，使用起来非常简单：

# mac和linux下面需要加sudo，windows不用加
sudo npm i -g yarn create-react-native-app

# 切换到工作目录，初始化react-native项目
create-react-native-app hello-world

# cli工具会创建一个hello-world目录，并写入需要的配置
# 进入目录，安装依赖
# 注意: 如果yarn版本过低，会报解压文件失败的错误，升级yarn之后重新安装即可
cd hello-world
yarn

运行模拟器(macOs)

因为cli工具已经生成了一个简单的app.js组件，所以我们不需要编码，直接启动服务即可:

yarn ios

不出意外的话，这里会出错误，是提示需要设置最大打开文件数，或者是安装 watchman, 这里的 watchman 并非npm包。

23:14:01: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

解决方式就是按照提示一步一步来:

brew install watchman
# 或者下面的代码
sudo sysctl -w kern.maxfiles=5242880
sudo sysctl -w kern.maxfilesperproc=524288

执行完后，再次运行，第一次运行，会卡在 Starting packager... 比较久

yarn ios

紧接着会弹出ios模拟器，滑动到最后一页，找到expo图标，打开它。如果没有找到这个图标，重启项目就可以了。

语法

现在回头看看根目录下的 app.js 。react-native 使用 jsx 语法进行开发。

样式方面，采用 css in js 方案处理组件样式。布局默认使用 flexbox，纵向排列。

view组件和text组件都有各自的属性，像color, fontSize等文本属性，只能用于text，而不能通过view继承，混用会出现警告。