第一个React Native程序踩到的那些坑

毫不夸张的说用React Native写一个Hello World !程序是我碰到最复杂的Hello World。网络上的有关的环境搭建相关的文档也很多,但是总是有这样那样的问题。

官方中文版的安装文档,windows环境搭建文字教程

原因可能有3个:

1. 这个东西最早还是在Mac机上开发的,可能支持的会好一点,windows平台时间短。

2. 网络被墙或不稳定,注册npm淘宝镜像会快很多,但是不能完全解决问题。

3. 版本问题,Nodejs版本、React Native 版本、Android SDK 版本。。。。等等

问题总是有解决的方法,下面我说一下我踩到的坑:

一、按照文档上说的一路往下走,到react-native init MyProject 这一步可能会用问题,首先MyProject不能大写开头,其次这一步可能会让你无限的等下去,直到绝望,

没办法只能cancel掉,然后

1.npm init

2.npm install react-native --save

3.node -e "require(‘react-native/local-cli/cli‘).init(‘.‘,‘myproject‘)"

二、 运行react-native run-android到这里可能是问题最多的。

1.文档上面推荐用Genymotion模拟器测试,我也试过了,不简单而且很慢,最后还是用自己的手机连接,具体怎么打开USB调试开关可能每个设备还不一样。我用的是小米Note,问题在GitHub有人回答,最重要的一点是:go back to Developer options, scroll down to find Turn on MIUI optimization and disable it. Your phone will be rebooted。关闭到所有的电脑上的手机助手连接。用命令adb devices 能看到则说明连接成功,注意不能同时打开模拟器和手机设备。

2.在安装Android SDK时,Tools/Android SDK Build-tools (23.0.1)(这个必须版本严格匹配23.0.1),这个文档上面也说了,一定要注意,react-native模板配置文件里面默认的是23.0.1版本的。

最后上一张安装成功的图片

时间: 2024-10-06 21:27:09

第一个React Native程序踩到的那些坑的相关文章

第一个React Native项目

1>下图操作创建第一个React Native项目: 用Xcode运行界面如下: 记住: 在使用项目文件期间,终端记住不要关闭的哟!!! 改变了程序代码,需要刷新运行,使用快捷键: Command+ R,我都是在mac下的操作哟,安卓我就不涉及记录了,毕竟我不是搞安卓的...?? 2> 使用WebStrom软件进行敲代码啦....启动编译有点慢,耐心等待哟!!! 看左边的文件夹所示: Android : 表示安卓项目的文件夹; iOS : 表示iOS项目的文件夹; node_modules :

DECO 一个REACT NAtive 开发IDE工具

DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:http://www.reactnativeexpress.com/    配套学习.

React Native初学踩的那些坑

1.react native - expected a component class, got [object Object] 组件引用名称必须是首字母大写 譬如: import Login from './login'; //文件名称和里面的类名首字母小写都没关系,但是引用的别名必须首字母大写 2.TextInput不显示 必须要设置TextInput的高度,默认是没有边框的 textInput :{ height : 40, borderColor: 'gray', borderWidth

如何通过 Chrome调试React Native程序-ios

1.下载 New React Developer Tools ,向Chrome添加此扩展程序(浏览器右上角—>设置),启用开发者模式 2.在模拟器下单击”Debug JS Remotely” 启动JS远程调试功能.此时Chrome会被打开,同时会创建一个“http://localhost:8081/debugger-ui.” Tab页. 3.视图—>开发者—>开发者工具—>sources分页即可打开React文件进断点设置

[ReactNative入门到精通]React Native 第一个程序 Hello Word

人生没有对错,只有选择后的坚持,不后悔,走下去,就是对的. React Native 项目目录解析 上一节我们简单的新建了一个React Native的项目AwsoneProject,我们什么都没有操作,就直接在模拟器上运行起来了.这里我们详细的看看,React Native给我们生成的这几个文件到底是做什么用的. 项目目录结构 文件建构如下图所示: android android 的项目构建目录 ios iphone 的项目构建目录 node_modules react native 所引用的

一个资深iOS开发者对于React Native的看法

一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很快放弃了自己去使用它的念头.毕竟我因为爱好而从事ios原生开发多年,并且目前为止已经很熟悉这一套开发专业工具. 我已经创造了一些我引以为傲的iOS应用——一些使用Object-C和Xcode构建的应用,通常人们都是这么做的.这两样工具是苹果公司

react native 入门 (1)- 环境搭建, 创建第一个Hello World

Create React Native App 是开始构建新的React Native应用程序的最简单方法.它允许您启动项目而无需安装或配置任何工具来构建本机代码 - 无需安装Xcode或Android Studio. 先安装Node.Js,则可以使用npm来安装create-react-native-app命令行实用程序: (NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准), npm install -

【React Native开发】React Native For Android环境配置以及第一个实例

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50456967 本文出自:[江清清的博客] (一)前言 FaceBook早期开源发布了React Native For IOS,终于在2015年9月15日也发布了ReactNative for Android,虽然Android版本的项目发布比较迟,但是也没有阻挡了广大开发者的热情.可以这样讲在2015年移动平台市场上有两个方向技术研究比较火,第一种为阿里,百度,腾讯

React Native Android 从学车到补胎和成功发车经历

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 好几个月没发车了,完全生疏了,为了接下来能持续性的发好车,这次先准备发个小车-- React Native.没错,就是这个从去年到现在官方都憋不出大招 1.0 版本,而被我朝开发者疯狂追捧备受争议的破车.怎么说呢,这玩意刚出来时有了解过,当时的内心是抵触的,但是内心总是架不住天朝的炒作能力,更架不住硬性指标,于是我就这么被 React Native 蹂躏了一番,也