react-native上手篇
根据公司发展,后期可能要做APP开发,所以了解一下react-native。之前工作用过react,所以想想应该不会太难。(结果配置环境和demo就搞了一天!)
1,搭建环境
1,Node( 版本大于8.3)
2,Python2.x( 不支持3.x,我本地装的3.7,下载一个2.7,改一下环境变量就好)
3,Java SE Development Kit (JDK)---JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)
安装教程,网上一大堆,找适合你,主要是一个jre和jdk,配置好环境变量。
注意:官网不建议使用cnpm,我只好换回npm镜像
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
4,安装Yarn、React Native 的命令行工具(react-native-cli)(网上的脚手架很多选择适合自己的。我用的官网推荐的)
npm install -g yarn react-native-cli
安装完 yarn 后同理也要设置镜像源: yarn config set registry https://registry.npm.taobao.org --globa
yarn config set disturl https://npm.taobao.org/dist --globa
在这块遇到点坑全局安装遇到问题,c盘写权限问题解决方案点这里
到这里走完了环境搭好了一半。
2,Android 开发环境 安装 Android Studio(很多下载需要fanqiang,选一个稳定的)
安装方法(网上很多)
注意:要配置环境变量,SDK 要选Android 9 (Pie)
装完需要运行一个简单的Demo,将手机开发者模式打开,允许usb调试。
手机就会安装一个app
到这一步环境就完成了。可以开心的玩react-native
3,react-native小试牛刀
创建项目
react-native init myapp
进入项目运行
react-native run-android
运行后会报这个问题。暂时不用管它,只是告诉你没有设备连接,后面我用 adb链接模拟器就好了
我暂时没有用模拟器,想看看在手机上是什么样,用
Android Studio打开项目的android文件,用上面运行demo同样的方法。
问题来了报了一个错,意思是说项目的包构建工具版本和SDK包构建工具版本不一致
解决办法:找项目构建工具版本改成和SDK构建版本一样就好
本来以为就好了,到手机上又红屏了。
解决React Native unable to load script from assets index.android.bundle on windows
原因没有找到assets下文件,需要手动创建并设置
1.手动在main下建立一个assets文件夹
2,然后cmd 进入项目的根目录下执行:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
3,在执行 react-native run-android在来一次就好了。
最终在手机跑起来了开心。
4,下面说说在react-native在模拟器运行遇到的坑
1,下载夜神模拟器。
2,设置一下要模拟手机的型号,减低配置。
3,模拟器打开开发者模式(找到版本号点5下就好)
4,打开cmd窗口输入adb,如果没有用,需要配置一下环境变量。(adb工具即Android Debug Bridge(安卓调试桥) tools。它就是一个命令行窗口,用于通过电脑端与模拟器或者真实设备交互。在某些特殊的情况下进入不了系统,adb就派上用场啦!)
那本地的adb在哪?在Android-SDK\platform-tools
配置好,在关掉cmd,重新打开,输入adb
出现版本就成功。记住你的版本号。
右键夜神模拟器的文件所在位置。有nox-adb.exe文件,当前文件打开cmd输入nox_adb.exe注意查看版本号和上面的版本号是否一致,如果不一致,连接会失败。如果不一致怎么办?将SDK中的adb.exe复制一份重命名为nox_adb.exe替换即可;
版本号一致后,cmd中执行
adb connect 127.0.0.1:62001 adb devices
连接好了,在项目中再执行react-native run-android(注意手机不要连着电脑)这样模拟器中装成功了
可以开始入坑了。
总结一下:
1,入门就很多坑,但万事开头难;
2,环境变量配置一定,一定不要配错,前面每一步要走的仔细小心;
3,不要放过每一个报错,都会导致项目跑不起。细节决定成败。
react-native上手篇的更多相关文章
- React Native 入门篇
React Native 英文官网:https://facebook.github.io/react-native/ React Native 中文官网:http://reactnative.cn/ ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- React Native指南汇集了各类react-native学习资源、开源App和组件
来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...
- react native学习资料
一:基础学习: react-native中文文档(react native中文网,人工翻译,官网完全同步)http://react-native.cn/docs/getting-started.htm ...
- React Native资料汇总
React Native 官方文档中文版翻译 http://wiki.jikexueyuan.com/project/react-native/homepage.html REACT NATIVE开发 ...
- Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...
- 一、React Native 搭建开发环境(1)(Mac OS - IOS项目篇)
React Native是Facebook推出的一个开发IOS和安卓APP的技术.至于更多的详情,这里不再描述,大家可以自行百度它的定义. 原因:由于我想在一台电脑上同时开发IOS和Android两个 ...
- React Native填坑之旅--与Native通信之iOS篇
终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...
- React Native填坑之旅--Flow篇(番外)
flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...
- React Native填坑之旅--Navigation篇
React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...
随机推荐
- PyCharm提交代码到git
- 小程序wx.request的封装
第一次做小程序项目,这个封装方法是同学推荐的一个网址,对我帮助很大,如果想看代码部分,请看网址详细介绍 网络请求都写在Page里,每个请求都要重复的写wx.request以及一些基础配置: 每个页面里 ...
- es6去重
// set是一种新的数据结构,它可以接收一个数组或者是类数组对象,自动去重其中的重复项目. var arr=[9,9,"丸子","丸子",undefined, ...
- Scrum学习心得
一.Scrum学习心得: 最近简单的学习了一下scrum模式,感觉又开启了一个新世界的大门. 首先,scrum是一个应用于互联网研发的开发方式,这种开发方式的主要特点是快速迭代,持续交付. scrum ...
- 用户控件 RadioButtonList
public static MvcHtmlString RadioButtonList(this HtmlHelper htmlHelper, string name, string codeCate ...
- mac下 部分服务启动,结束, 查看状态的命令
以sshd服务为例 启动sshd服务:sudo launchctl load -w /System/Library/LaunchDaemons/ssh.plist 停止sshd服务:sudo laun ...
- day02 运算符
运算符2019-04-01 目录 一.算数运算符 + = * / % // ** 二.比较运算 > < == != >= ...
- HTTP 客户端接收数据超时
本文使用两种方式测试HTTP 客户端读数据超时的情况,一种是直接使用golang自带的http库,另一种是使用martini web框架. 1. 测试1--直接使用http库 1.1.启动server ...
- 【配置阿里云 I】申请配置阿里云服务器,并部署IIS和开发环境,项目上线经验
https://blog.csdn.net/vapaad1/article/details/78769520 最近一年在实验室做web后端开发,涉及到一些和服务器搭建及部署上线项目的相关经验,写个帖子 ...
- Log4j配置发邮件功能
# 发送日志到指定邮件log4j.appender.mail=org.apache.log4j.net.SMTPAppenderlog4j.appender.mail.Threshold=DEBUGl ...