因为身在H5-Hybird的框架部门,最近团队开始尝试使用React-Native来做些东西。...xcodeproj是xcode的项目文件。 (4)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。...对于React-Native开发,仅仅有基础前端开发的知识是不够的,你还需要了解和掌握的有: Node.js基础 JSX语法基础 Flexbox布局 3、目前需要关注的文件 目前阶段有几个文件时需要注意下的...React-Native使用css来构建页面布局,使用Native iOS Components给我们提供强大的组件功能。目前已有组件如下图: ?...现在,是展现css魅力的时候了。React-native使用的css 表达是一个JS自面量对象,并且严格区分该对象属性的类型,所以要遵循对象的写法,而不能使用以前css的写法,这个需要自己熟悉了。
然后我们打开文件下的index.ios.js文件(我用Sublime Text打开),然后删除里面的东西(或者注释也行),不用重新运行Xcode,等一下你就知道rn的强大之处。...var React = require('react-native'); //这将加载 react-native 模块,并将其保存为React变量。...React Native 使用和Node.js 一样的 require 函数来加载模块,类似于Swift中的import语句。...backgroundColor:'white', fontSize:30, margin:80 } });//这将定义一个css样式,我们将在显示“Hello World”字符串时应用这个样式...(模拟器在选中状态),直接在模拟器上按command + R重新运行(不用重新运行Xcode,是不是很强大?)
但是最受吐槽的还是性能差。页面渲染效率低,在Webview中绘制界面,实现动画,资源消耗都比较大。...这是 React-Native 设计的初衷: 既保留流畅的用户体验,有保留React的开发效率。 React-Native 做了什么 React-Native 丢弃了 Webview。...2) 运行下面的命令,初始化项目: react-native init helloworld 3) 在项目目录下面,运行: npm install npm start 4)...使用 Xcode 开发项目,运行,即可看到模拟器中的效果。...删除 /Users/{you}/Library/Developer/Xcode/DerivedData 文件夹,重启Xcode。
环境配置视频教程 http://v.youku.com/v_show/id_XMTQ4OTYyMjg4MA==.html 创建项目 环境配好后,就可以在命令行提示符下使用 react-native...start 启动android react-native run-android 启动ios react-native run-ios 开发环境的组成 一个node.js 的开发服务器,在开发阶段,我们的电脑上需要开启这个...web服务,以使得在模拟器中可以显示内容。...当我们更改了js源代码后,也能及时的在模拟器里看到。 模拟器设备,就是我们开启的Android或者IOS虚拟机 jsBundle 开发者写的源代码打包而成,在开发阶段更改js文件会自动更新到模拟器。...在命令提示符输入: react-native start 启动服务 执行 react-native run-android 启动android ,稍等片刻就可以在Android模拟器里看到页面了
模拟器好好的 , 真实机就出问题....Authority 使用此证书时: 使用系统默认. => 保存 其他 手动添加依赖 Xcode 打开项目, Libraries 右键 Add Files to "Your Project Name"...在 node_modules/....../react-native/React 更改模拟器 react-native run-ios --simulator "iPhone 7 Plus" 注意事项 执行 react-native link...执行之后 请使用Xcode打开 *.xcworkspace 出现问题请使用xcode 编译调试错误.
,如果没有,可以创建一个模拟器,如下图: 做完上述步骤后,切记要配置Android SDK的环境变量,在终端使用如下命令进行环境变量文件的编辑: sudo vi ~/.bash_profile...,恭喜你,你的ReactNative项目已经可以跑起来了(需要注意:运行安卓项目的时候,安卓模拟器必须先启动): 需要注意,运行iOS项目时,会默认启动Xcode的默认模拟器,如果要启动特定的模拟器...,可以使用如下命令: react-native run-ios --simulator "iPhone SE" xcrun simctl list devices命令可以打印出所有可用的iOS模拟器...HelloWorld,在iOS模拟器中使用command+R来进行界面的刷新,效果如下: 在安卓模拟器中双击R键来进行界面的刷新。...进入SublimeText插件的搜索界面,搜索到所需要安装的插件安装即可,如下: 温馨提示:在使用PackageContrl的Install Package命令时,很有可能会出现超时问题,原因是
确认node安装完毕之后,在cmd输入 npm install -g yarn react-native-cli 设置Android Studio 经过漫长的等待,Android Studio...此时Android Studio配置全部完成,然后需要在环境变量当中加入 在环境变量中新建ANDROID_HOME,值就是当时安装sdk的路径。...安装完成后,会进入一个界面购买license的界面,选择最下方的个人用户,即可免费使用。进入后等待几秒,会让选择所要运行的安卓虚拟机。...如果预先,没有连接真机,或者打开安卓模拟器,会报一个未连接设备的错误,所以这里我们选择事先把模拟器安装好,并开启。...此时模拟器会出现react-native的页面 hello world 现在,用ide打开之前创建好的bleachApp这个项目,向经典致敬一下,把页面改成hello world。
全局安装脚手架 npm install react-native-cli -g 使用react-native-cli初始化项目 react-native init 项目名称 修改android.../reactDemo/gradle-2.4-all.zip 绑定模拟器或真机 可以使用adb devices查看连接的设备 5.1 使用夜神模拟器安装调试app 5.2 使用adb命令链接设备到模拟器...:adb connect 127.0.0.1:62001 端口号可使用 安装目录nox/bin/下的nox_adb devices查看或者查看进程PID 多个真机连接可用此connect Ip:port...的方式连接到指定设备 5.3 若使用真机调试需要打开USB调试并允许通过USB安装应用 开始构建 react-native run-android 构建时会启动8081端口为服务端来在保存代码后进行更新...点击模拟器的摇一摇(Ctrl+0)选择Dev Setting->Debug Server host & port for device-> 电脑IP:8081 ?
run,或者删除APP再run后失败的情况下使用) 目录 Android真机调试 IOS调试篇 WebView调试篇 Android真机调试 安装adb,后来可以通过adb devices来检测设备连接成功没有....html 运行react-native run-android IOS模拟器篇 1.MAC上调试工具React-native-debugger下载缓慢及其解决办法。...) 比如下面的这个不能连接到服务器就是我偶尔或经常遇到的问题, 解决方法:一般刷新几次就好了,如果刷新多次无效,那么重新通过react-native启动项目 (如果IOS模拟器是个人我已经想要打死他了。...提示文字: “Unhandled JS Exception: global.nativeTraceBeginSection is not a function” 这个问题据说不少人遇到过,解决方法是:在模拟器上删掉...解决办法: 运行 npm start — —reset-cache 清除缓存 14.IOS模拟器使用起来非常缓慢,如同乌龟和树獭一般,而且卡顿死机看心情 解决办法:毫无办法,听天由命 WebView篇
启动 安装较为稳定的版本:0.59.9(如果你想用最新的,必须配置访问外国网站) react-native init 项目名 --version 0.59.9 初始化完毕后,就可以运行了...进入到你的项目(绝对路径不要带中文)。 ios ios执行react-native run-ios 该命令会调起Xcode的自带iPhone模拟器。...android 安卓执行react-native run-android 接下来把安卓模拟器也配置好: 用android studio打开rn项目, 就可以打开模拟器。...这个时候检测adb-devices会发现多出一条记录,那便是模拟器的标识。 有了adb连接,就可以使用react-native run-android了。...Errors and Warnings 在development模式下,js部分的Errors 和 Warnings会直接打印在⼿机或模拟器屏幕上,分别以红屏和黄屏展示。
一、环境配置 (1)需要一台Mac(OSX) (2)在Mac上安装Xcode (3)安装node.js:https://nodejs.org/download/ (4)建议安装watchman,终端命令...二、Hello, React-Native 现在我们需要创建一个React-Native的项目,因此可以按照下面的步骤: 打开终端,开始React-Native开发的旅程吧。...xcodeproj是xcode的项目文件。 (4)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。...启动完成后,你会看到React-Packger和iOS模拟器,具体的效果如下,说明你创建项目成功了。.../third-party/glog-0.3.5/src: 解决办法: 不要直接使用 react-native init HelloWorld 创建项目, 后面加个 --version 0.45.0 之前的版本就好了
编译node.js的C++模块时需要用到。.../FileWatcher/index.js,将其中的MAX_WAIT_TIME 从25000改为更大的值(单位是毫秒) 运行模拟器 推荐使用BlueStacks不过要小心它推送的广告和垃圾应用...安卓运行 保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行 react-native run-android 首次运行需要等待数分钟并从网上下载gradle依赖。...运行完毕后可以在模拟器或真机上看到应用自动启动了。...在模拟器或真机菜单中选择Debug JS,即可开始调试。
command+D就可以弹出以下窗口,在浏览器窗口上打开链接localhost:8081/debugger-ui就可以进行debug调试 使用react-native写一个简单的页面 使用react...在真机上运行 mac环境下使用react-native处理进行真机模拟与调试的步骤方法是: 首先保证MAC电脑和IOS设备在同一个WIFI环境下,将ShortVideoList/IOS/ShortVideoList...在react native中,我们使用measureLayout来判断窗体的具体位置。...实现react native懒加载我们首先需要研究如何捕获图片出现在模拟器的可视区域,原生ios可以直接根据已有的属性判断图像出现在模拟器的可视区域。...data的差异,仅当两份数据不一致时才再次触发render方法。
+D就可以弹出以下窗口,在浏览器窗口上打开链接localhost:8081/debugger-ui就可以进行debug调试 使用 react-native 写一个简单的页面 使用react native...在真机上运行 mac环境下使用react-native处理进行真机模拟与调试的步骤方法是: 首先保证MAC电脑和IOS设备在同一个WIFI环境下,将ShortVideoList/IOS/ShortVideoList...实现react native懒加载与Web懒加载的实现方式有些许不同。在react native中,我们使用measureLayout来判断窗体的具体位置。...实现react native懒加载我们首先需要研究如何捕获图片出现在模拟器的可视区域,原生ios可以直接根据已有的属性判断图像出现在模拟器的可视区域。...data的差异,仅当两份数据不一致时才再次触发render方法。
关于NDK 因为React Native的Examples是在 Android ndk r10e版本上编译的(@#7526),所以我们要编译它则需要使用与之对应的NDK版本,单击下载ndk r10e。...编译与运行 在运行之前我们首先需要一个Android模拟器或一个连接到电脑上的Android设备,然后GitBash进入到react-native目录下运行: ....编译与运行 在运行之前我们首先需要一个Android模拟器或一个连接到电脑上的Android设备,然后打开终端进入到react-native目录下运行: ....解决办法:删除以前的ndk然后重新下载ndk r10e并配置好NDK的路径即可解决。...react-native所位于的路径中有空格,解决办法删除目录名中的空格即可。
新报错(rn版本:0.53.3)2018.3.6 今天在搞react-native环境时,遇到了一些坑,这里记录一下。 首先最重要的一点是一定要按官网一步一步来,不然可能会出现一些奇奇怪怪的问题!...gradle和权限问题 gradle默认都是下载2.14.1的,在run-android时可能会出现下载失败或者长时间下载不了,这时就手动去下载。...刚遇到这个问题时一脸懵比,没有有效的报错信息可供参考。 于是,去检查了adb是可以用的,sdk路径也没有问题。 ? 检查模拟器也是连接上了。...经过一番百度 and google并没有什么进展,尝试使用如下命令指定模拟器运行: ? 终于运行了起来,但是每次都要带参很麻烦。...run-android,成功运行~ ps:修改权限后 android/gradlew 文件引起了一个问题(虽然文件内容没有变化,但是文件在git上是有变化可以上传的),在另一台window电脑上使用
,一般情况是因为在windows环境依赖的build环境不完整,总之是一个大坑,很多现在的这种包在windows底下都会出错,不想折腾的就直接安装VS 2015选择自定义安装第三方的一些工具来解决,具体就不赘述了...,找了一篇文章自己琢磨吧windows 安装环境 cd app, react-native run android or react-native run-ios,出错一般是因为模拟器没有启动或adb...通道被占用,mac环境一般没什么问题,windows环境推荐真机调试,模拟器实在是一个慢啊,可以adb devices查看连接的手机 PS 安装过程中可能会遇到很多错误,需要耐心,大多是: 一些build...start可以单独启动Packger;android模拟器ctrl+m可以调出开发者菜单;真机adb devices可以看到手机列表 无法连接到dev server需要配置dev setting的debug...serverip地址,记得加上端口号8081 init命令后的项目名称即是包名称,不要使用-,非特殊情况千万不要修改,会产生一堆奇诡错误 依靠错误信息和Google一步一步解决把,本章结束。
领取专属 10元无门槛券
手把手带您无忧上云