RN开发环境

RN开发环境

  • 依赖

必须安装的依赖有:Node、Watchman、Xcode和CocoaPods。

Node, Watchman

  • Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。

推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装:

brew install node

brew install watchman

确保node v12以上,建议设置 npm 镜像(淘宝源)以加速后面的过程

注意:不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm
  • Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。
npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名。

  • 创建新项目

不要单独使用常见的关键字作为项目名(如 class, native, new, package 等等)。请不要使用与核心模块同名的项目名(如 react, react-native 等)。请不要在目录、文件名中使用中文、空格等特殊符号。

npx react-native init AwesomeProject
  • 编译并运行 React Native 应用

项目目录中运行yarn ios或者yarn react-native run-ios:


cd AwesomeProject
yarn ios
# 或者
yarn react-native run-ios
  • 运行项目,iOS 模拟器中按下⌘-R就可以刷新 APP 并看到你的最新修改!(如果没有反应,请检查模拟器的 Hardware 菜单中,connect hardware keyboard 选项是否选中开启)

  • 组件 JSX语法 与 SwiftUI 类似声明式布局

export default全局导出

image

  • 功能组件

image

  • 类组件

image

image

posted on 2020-04-12 12:58  码上翻身  阅读(379)  评论(0编辑  收藏  举报

导航