没有简介,直接开始干活吧。
默认阅读本文的你已经安装好 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继承,混用会出现警告。