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继承，混用会出现警告。