loading...

1

react native开发

reactreact native读完大概需要8分钟

  • 发布时间:2018-08-19 23:35 星期日
  • 刘伟波
  • 479
  • 更新于2018-09-12 19:53 星期三

一 环境配置

源文档 https://reactnative.cn/docs/getting-started/

window环境配置

暂时用的window后面可以补上ios

安装依赖

  • Node,
  • Python2
  • JDK

注意 Node的版本必须高于 8.3,Python 的版本必须为 2.x(不支持 3.x),而 JDK的版本必须是 1.8(不支持 1.9)。

npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

Android 开发环境

  1. 安装 Android Studio
    确保选中了以下几项:
  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device
  1. 安装 Android SDK
    Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native应用需要的是Android 8.0 (Oreo)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在Android Studio的欢迎界面中找到SDK Manager。点击"Configure",然后就能看到"SDK Manager"。

http://images.liuweibo.cn/image/common/20180819234043_1534693243397_49831_1534693264277.png

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。

SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 8.0 (Oreo)选项,确保勾选了下面这些组件(重申你必须使用稳定的翻墙工具,否则可能都看不到这个界面):

  • Android SDK Platform 26
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

http://images.liuweibo.cn/image/common/QQ截图20180819234228_1534693349755_59017_1534693377652.png

然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了React Native 所必须的26.0.3版本。你可以同时安装多个其他版本,然后还要勾选最底部的Android Support Repository

http://images.liuweibo.cn/image/common/QQ截图20180819234237_1534693359161_41213_1534693405040.png

最后点击"Apply"来下载和安装这些组件。

  1. 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的Android SDK 装在什么路径,从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK所在的目录(具体的路径可能和下图不一致,请自行确认):

http://images.liuweibo.cn/image/common/QQ截图20180819234402_1534693443745_7074_1534693448157.png

SDK 默认是安装在下面的目录:

c:Users你的用户名AppDataLocalAndroidSdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK

你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。

创建新项目

这里就不用官方文档提供的init方法,因为比较坑,会出现很多红屏,很多错误,对于初学者,不友好,折腾了几天,没搞出来,经过查阅原始faccebook官方文档 https://facebook.github.io/react-native/docs/getting-started.html,这里国内用户要翻墙。

create-react-native-app,简称CRNA,用来快速创建react nativeapp

npm install -g create-react-native-app
create-react-native-app AwesomeProject

cd AwesomeProject
npm start

这里是官方提供的脚手架,还是很方便,跳过一万种环境错误红屏。

npm start命令能让你的 RN app运行在开发模式中。你可以在你的 iosandroid手机中下载expoapp,然后在 expo中可以通过局域网实时查看RN 应用!这中方法比模拟器方便许多,而且不需要连接电脑哟。你的团队成员都可以实时预览,非常方便。

expo的相关工具和预览app在这里
https://expo.io/, 下载地址页面https://expo.io/tools,下载地址https://expo.io/tools,有可能网速比较慢,要耐心等待。 下载完成后传给手机,手机安装后就可以扫码,愉快的打开react native app了。

我们进入CRNA创建的项目,npm start运行,可以看到出现一个硕大的二维码。
http://images.liuweibo.cn/image/common/QQ截图20180819235238_1534693959692_7757_1534693965676.png

expo中扫码即可加载运行,加载后会出现.
这里的地址都是要翻墙的哦,如果不会翻墙,可以看看我的github仓库star
XX-Net这个工具,翻墙稳定且高效

作者:刘伟波

链接:http://www.liuweibo.cn/p/213

来源:刘伟波博客

本文原创版权属于刘伟波 ,转载请注明出处,谢谢合作

你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 segmentfault平台, 也可以来我的直播间来提问。
    关于技术问题或者有啥不懂的都可以留言, 我会定期回复答疑, 也可以来 我的直播间 提问, 推荐最新仓库 前端知识体系, 感謝支持!