我的第一个reactnative

简介: 由于在做极光推送,前端使用的框架是reactnative,后台写好后为了测试一下,所以按照react官方的教程搭了遍react.开发环境:1.windows 7(建议各位如果开发react的最好还是买台mac,一台mac给你打价值远远大于mac机器自身的价值)2.

由于在做极光推送,前端使用的框架是reactnative,后台写好后为了测试一下,所以按照react官方的教程搭了遍react.

开发环境:
1.windows 7(建议各位如果开发react的最好还是买台mac,一台mac给你打价值远远大于mac机器自身的价值)
2.安装jdk 1.8,配置环境变量
3.安装安卓sdk,可以下载安卓studio
4.安装python,node.js
5.测试reactdemo在网页上是否可以打开
5.安装安卓studio,配置sdk为23并导入reactdemo
6.打包成apk安装到手机
7.关于ios,需要有mac电脑,安装xcode,这里由于手上没有mac设备就不做介绍,可以参考其他文章
安装python2

首先打开cmd,运行choco install python2安装python


image.png

image.png

安装node,执行指令choco install nodejs.install

image.png

image.png
然后执行指令:npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
然后安装全局模块
npm install -g yarn react-native-cli   下载react-native的demo
react-native init reactdemo
注意:不要执行中文路径名,也不要在中文路径下安装项目

环境装好以后需要安装java,jdk1.8,并配置java环境变量,以及安装安卓的sdk,由于我电脑上面已经有这环境了,故这里不做说明。
jdk1.8安装地址

image.png


demo的根路径


image.png

node_modules是node.js的目录,主要是用来当作服务器使用(就是java当中的tomcat)


image.png

如果出现上图说明我们的配置已经完成。
接下来需要安装安卓studio,以及配置sdk23,还有在ios上安装xcode。

首先需要先安装git,可以参考idea和Webstorm上使用git和github,码云,这里面详细说明了git,github的使用以及安装。

Genymotion

比起Android Studio自带的原装模拟器,Genymotion是一个性能更好的选择,但它只对个人用户免费。

  1. 下载和安装Genymotion(genymotion需要依赖VirtualBox虚拟机,下载选项中提供了包含VirtualBox和不包含的选项,请按需选择)。
  2. 打开Genymotion。如果你还没有安装VirtualBox,则此时会提示你安装。
  3. 创建一个新模拟器并启动。
  4. 启动React Native应用后,可以按下F1来打开开发者菜单。

Visual Studio Emulator for Android是利用了Hyper-V技术进行硬件加速的免费android模拟器。也是Android Studio自带的原装模拟器之外的一个很好的选择。而且你并不需要安装Visual Studio。 在用于React Native开发前,需要先在注册表中进行一些修改:

  1. 打开运行命令(按下Windows+R键)
  2. 输入regedit.exe然后回车
  3. 在注册表编辑器中找到HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools条目
  4. 右键点击Android SDK Tools,选择新建 > 字符串值
  5. 名称设为Path
  6. 双击Path,将其值设为你的Android SDK的路径。(例如C:\Program Files\Android\sdk

<a class="anchor" name="%E6%B5%8B%E8%AF%95%E5%AE%89%E8%A3%85" style="box-sizing: border-box; background-color: transparent; color: rgb(51, 122, 183); text-decoration: none; position: relative; top: -70px;"></a>测试安装

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

如果你在设备上看到了红屏报错,请参阅在设备上运行

提示:你可以使用--version参数创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

Windows用户请注意,请不要在命令行默认的System32目录中init项目!会有各种权限限制导致不能运行!

修改项目

现在你已经成功运行了项目,我们可以开始尝试动手改一改了:

  • 使用你喜欢的文本编辑器打开App.js并随便改上几行
  • 按两下R键,或是用Menu键(通常是F2,在Genymotion模拟器中是⌘+M)打开开发者菜单,然后选择 Reload JS 就可以看到你的最新修改。
  • 在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。
    react中文官方站地址
    image.png
目录
相关文章
|
移动开发 JavaScript 前端开发
探索ReactNative应用
本篇文章是我看AC2016腾讯前端技术交流大会后写的。写的不好,大家见谅啊。 一,什么是ReactNative?   简单来说就是可以用javascript来写APP了,而且性能还不错。 用JS写的话已经有很多框架比如Cordova,Dcloud等等那为什么这些框架不行呢?主要还是因为它们是基于webview来做的,导致它们的性能不行。   React.js Conf
1799 0
|
移动开发 JavaScript 前端开发
Weex&ReactNative对比
>weex开源有一段时间了,其实去年刚听说weex这个项目的时候,我就对它很敢兴趣,很大程度上是因为我自己对vue的喜爱。我从13年左右开始接触vue,14年开始熟悉这个轻量的框架,并慢慢的推荐给了身边的朋友,当我得知手淘的weex是基于vue的时候,就有了想了解一下的冲动。在weex开源之前,我刚好有几个月的时间一直在致力于ReactNative的优化改造,加上自己之前使用ReactJS的一些经
5732 0
|
移动开发
ReactNative升级到0.56以后,装饰器无法使用
解决方案 移除babel-plugin-transform-decorators-legacy npm install --save-dev @babel/plugin-proposal-decorators 配置.
1446 0
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
83 0
|
3月前
|
存储 前端开发 JavaScript
【第34期】一文学会React组件传值
【第34期】一文学会React组件传值
31 0
|
3月前
|
前端开发
【第31期】一文学会用React Hooks组件编写组件
【第31期】一文学会用React Hooks组件编写组件
33 0
|
3月前
|
存储 前端开发 JavaScript
【第29期】一文学会用React类组件编写组件
【第29期】一文学会用React类组件编写组件
30 0
|
3月前
|
前端开发 开发者
【第26期】一文读懂React组件编写方式
【第26期】一文读懂React组件编写方式
28 0
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
40 0
|
2月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
15 1