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.jsreact-native 使用 jsx 语法进行开发。

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

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

猜你喜欢

转载自www.cnblogs.com/small-coder/p/9148264.html