概述
本文所讲述均在mac下安装,有windows下办公需求的同学,可以去这里:
2.http://blog.csdn.net/u011068702/article/details/49448043
好的,言归正传。下面开始在mac下安装RN。
1.安装Homebrew
Homebrew 是一个方便开发者在 MAC OS X 系统上面安装 Linux 工具包的 ruby 脚本。
如果执行上面的命令报下图的错误,说明你的系统之前已经安装过Homebrew了。
安装过的可以尝试更新一下:
2.使用brew来安装nvm
这里可能会报如下错误:
因为缺少/Library/Caches/Homebrew这个目录的权限,输入下面的命令:
nvm安装完成,接下来会提示说是把nvm加入到环境变量中:
在.bash_profile中加入下面两行,然后source执行一遍。
3.安装Node.js
坑:官方命令打不开,老老实实下载客户端安装吧。
4.安装watchman和flow
watchman 是 Facebook 的一个用于监控文件变更并触发指定操作的工具。
Flow 是一个 JavaScript 的静态类型检查器,建议安装它,以方便找出代码中可能存在的类型错误。
后面的安装没有啥问题,按照官方文档来就可以:
5.安装PCRE
最后,最好执行一下如下命令,更新相关软件:
4.开始Hello World
环境安装好了,迫不及待的来 Hello world。运行如下几条命令,直接可以生成一个样例项目:
运行结果:
插上手机或是模拟器,最好是5.0以上的系统,进入AwesomeProject目录下,开始运行:
这里会用Gradle来编译。编译过程中有可能会出现 Android sdk 找不到,Build tools 版本找不到的错误。这是因为 RN for Android 需要环境变量,在.bash_profile中加入:
同时需要需要 Build-tools version 23.0.1,API 23 等,安装好就可以正常编译了。
但是再次运行,模拟器出现如下状况:
通常正常情况下会自动安装安装 APK 包并运行,与此同时会打开一个终端运行 dev server。
但我们发现这里并不能自动运行 dev server,你可以在当前项目目录中运行如下命令来手动启动 server:
点击模拟器的RELOAD JS按钮,出现下图。终于成功了,哭了。接下来就可以开始 React Native 之旅了。
在 Android 端,在 AwesomeProject
里面运行 react-native run-android
来在你的模拟器设备上面安装生成的应用,并且开启允许代码实时渲染的 Node 服务器。为了看到你的更改你必须打开震动菜单(摇动你的设备或者按住设备上面的菜单按钮,在模拟器上面按住 F2 或者 Page Up,在 Genymotion 上面按住 ⌘+M),然后点击 Reload JS
。
注意
- 确保相关工具和 Android SDK 都是最新的;
- 因为 React Native for Android 提示错误和开发菜单都是通过悬浮窗显示的,要注意的 ROM 有没有自作聪明的帮你默认禁用掉了显示悬浮窗的权限;
- RN需要启动一个Dev server 来辅助开发,Android 5.0 可以直接通过 USB 的访问,5.0 以下只能通过 WiFi 来访问。为了便于开发,还是建议使用 5.0 的机器。
相关推荐
在 React Native 中利用现有的 JavaScript 和 React 知识,就可以开发和部署功能完备的、真正原生的移动应 用,并同时支持 iOS 与 Android 平台。除了框架本身的概念讲解之外,本书还讨论了如何使用第三 方库,以及...
第1章 初识React Native 1 1.1 React Native 的优点 2 1.2 风险和缺点 4 1.3 小结 4 第2章 React Native 工作原理 5 2.1 React Native 是如何工作的 5 2.2 渲染周期 7 2.3 在React Native 中创建组件 2.4 ...
本书是一本实践指南,从基础知识入手,逐步深入,带领读者部署可100%代码复用的、成熟的跨平台移动...除了框架本身的讲解,作者还探讨了如何使用第三方库,以及如何编写自己的Java或者Objective-C的React Native扩展。
快速入门指南Mixpanel 的 React Native SDK 是 Mixpanel 的原生 iOS 和 Android SDK 的包装器,它支持离线跟踪。 查看我们的,了解更多关于在 React Native 上安装和使用 Mixpanel 的深入信息。1. 安装 Mixpanel ...
目录构建世博会的“独立”应用从Create React Native App弹出构建依赖关系(Xcode和Android Studio) 我应该使用ExpoKit吗? 故障排除联网iOS模拟器无法打开QR码不扫描 更新到新版本您只需要很少(理想情况下永远不...
良好类型的React Native库提供对iOS和Android上的Apple身份验证的支持,包括对所有AppleButton变体的支持。 使用此库的先决条件 如果您不确定以下内容,则@invertase/react-native-apple-authentication库将不起...
:page_facing_up: 有据可查完整的参考和安装文档以及详细的指南和常见问题解答 :fire: 镜像官方Firebase Web SDK 在React Native中充当Firebase Web SDK的替代品 最大限度地提高跨平台代码的可重用性,例如在Web...
更新应用程序的react-native-scripts依赖关系应该像更改package.json的版本号并重新安装项目的依赖关系一样简单。 升级到React Native的新版本需要更新react-native , react和expo软件包版本,并在app.json设置...
如果不这样做,请检查《入门指南》以进行安装: : 安装yarn add react-native-notifier 要么npm install --save react-native-notifier用法使用NotifierWrapper包装您的应用import { NotifierWrapper } from 'react...
React本机样板 包含和配置的软件包 eslint >遵循airbnb样式指南 ...用于在应用程序中路由的react-native-router-flux或react-navigation (不包括) 脚步 建立 在目录中运行react-native init <proje
更新应用程序的react-native-scripts依赖关系应该像更改package.json的版本号并重新安装项目的依赖关系一样简单。 升级到React Native的新版本需要更新react-native , react和expo软件包版本,并在app.json设置...
目录构建世博会的“独立”应用从Create React Native App弹出构建依赖关系(Xcode和Android Studio) 我应该使用ExpoKit吗? 故障排除联网iOS模拟器无法打开QR码不扫描 更新到新版本您只需要很少(理想情况下永远不...
指南针React Native :compass: 一个简单的指南针应用程序,仅使用react-native构建,仅用于学习目的。 世博版可以在找到。 该项目总体上是任何试图在本机中使用传感器/磁力计的人的示例。 描述 一个非常简单的演示...
雷达React型 这是用于Webogram的调整版本的简单Webview包装器 截屏 该项目是通过。 您将在下面找到有关执行... 更新应用程序的react-native-scripts依赖性应该很简单,只需增加package.json的版本号并重新安装项目的
您只需要很少(理想情况下永远不需要)更新全局安装的create-react-native-app 。 更新应用程序的react-native-scripts依赖性应该很简单,只需增加package.json的版本号并重新安装项目的依赖性即可。 升级到React ...
reactnativepaper.com 功能 遵循材料设计指南 遵循平台适配指南 在 iOS 和 Android 上均可使用 完整主题支持 目前支持的 React Native 版本:>= 0.50.3 试用 使用 Expo 运行示例应用程序以查看其实际效果。 ...
目录构建世博会的“独立”应用从Create React Native App弹出构建依赖关系(Xcode和Android Studio) 我应该使用ExpoKit吗? 故障排除联网iOS模拟器无法打开QR码不扫描 更新到新版本您只需要很少(理想情况下永远不...
适用于React Native的功能丰富的Android和iOS通知库。 安装 yarn add @notifee/react-native 文献资料 安卓 Android的API允许创建丰富,样式丰富且高度交互的通知。 在下面,您将找到涵盖受支持的Android功能的指南...