• 在前一天明明开发得很好,react-native run-android一运行就能跑起来,但是第二天开发时运行react-native run-android命令就出现如下错误: 报这个的原因有很多,博主没有仔细找具体原因,由于开发时间紧急,发现一...

        在前一天明明开发得很好,react-native run-android一运行就能跑起来,但是第二天开发时运行react-native run-android命令就出现如下错误:

    报这个的原因有很多,博主没有仔细找具体原因,由于开发时间紧急,发现一个笨的解决方法(下面回答),得以继续开发。

    FAILURE: Build failed with an exception.
    
    * What went wrong:
    Execution failed for task ':app:installDebug'.
    > com.android.builder.testing.api.DeviceException: No online devices found.
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
    
    BUILD FAILED
    
    Total time: 17.847 secs
    Could not install the app on the device, read the error above for details.
    Make sure you have an Android emulator running or a device connected and have
    set up your Android development environment:
    

    解决方案:

    上面在Terminal里面可以看出,react-native run-android 命令运行报错了,但是server仍然在运行。直接打开你在开发的APP,使用手机摇一摇点击 “reload”,然后就会发现,修改过的代码是直接运行在手机上的(如果你卸载了开发版APP,我也不知道咋办了)。虽然Terminal报错,治标不治本,但是丝毫不影响正常开发,可以直接忽略这些错误,先做开发。

    ps:此片文章不能给予大家太多帮助,但是如果出现这样的错误,有又比较急的开发任务,大家可以先忽略这样的问题,让开发先进行下去。

    展开全文
  • react-native 运行项目

    2018-06-27 19:01:57
    2.react-native run-android 打包安卓项目,如果连接了手机,那么运行完后会直接发送到手机安装,如果没有连接手机,可以在android\app\build\outputs\apk下找到刚才打包的文件,发送到手机安装或者在手机模拟器上...

    打开cmd,找到项目所在位置,运行以下指令:

    1.npm install,安装项目依赖,有时可能需要翻墙,一般比较慢。

    2.react-native run-android  打包安卓项目,如果连接了手机,那么运行完后会直接发送到手机安装,如果没有连接手机,可以在android\app\build\outputs\apk下找到刚才打包的文件,发送到手机安装或者在手机模拟器上安装,如果在手机安装,安装好后,进入程序,摇一摇手机,在弹出框上选择Dev settings,然后点击debugging,输入电脑的ip地址,要求手机与电脑处在同一wifi。

    3、react-native start,摇一摇手机,项目就开始在手机上运行了,可以点击弹框上的stop remote js debugging,在浏览器上会看到相应的信息,配合调试。

    作为一个新手,运行了我的第一个react-native项目,成功跑起来了,真是不容易,今天先写到这里,以后再更新。

    展开全文
  • 一、ReactReact.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页。 在React之上发展出了React.js框架用来开发网页,发展出来React Native用来开发...

    一、React、React.js和React Native的关系

    React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页。

    在React之上发展出了React.js框架用来开发网页,发展出来React Native用来开发移动应用。

    因为React基础框架与React.js框架是同时出现、同时进化发展的,就造成了React基础框架的基本概念、设计思想都是在React.js的相关文档中描述的。

    后来,Facebook推出React Native后,也没有把React的相关概念文档从React.js文档中分离出来,就导致了学React Native要去看React.js文档。

    二、React Native开发特点

    1、一次学习,随处编写;

    使用React Native可以为iOS和Android操作系统开发应用程序,不同平台上的代码根据平台会有一些微小的区别。

    2、混合开发

    React Native代码开发的模块与原生代码开发的模块可以双向通信、无缝衔接;
    混合开发可以分为3种情况:

    • 通用的UI界面与业务逻辑由React Native开发,但与手机平台紧密关联的处理由原生代码来执行;
    • 将原来使用原生代码实现的UI小部件包装成React Native的自定义组件;
    • 应用界面在React Native开发的界面与原生代码开发的界面间切换;

    3、高效的移动应用开发

    使用RN开发移动应用,绝大部分UI界面与业务逻辑都是一套代码。使用React Native开发移动应用的UI界面比使用原生语言快捷高效,业务逻辑处理部分开发效率与开发原生代码相仿。

    UI开发是React Native的强项的主要体现:

    (1)独特的UI实现框架

    React重新思考了UI开发过程,并且提出了一套全新的、高效的框架。React Native官网描述的出发点:用于开发数据不断变化的大型应用程序。

    (2)组件化开发

    React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。

    (3)跨平台移植代码迅速

    使用React Native进行UI开发时,开发者通常是先在一个操作系统上开发,然后用这套代码去另一个操作系统中添加适配代码,做到一份代码在两个平台运行。

    (4)自动匹配不同屏幕大小的手机

    使用React Native开发,开发者无须为不同的屏幕分辨率准备不同的图片资源或者布局文件甚至可以不考虑屏幕大小的问题,通过灵活的布局方式,React Native可以做到在不同的手机屏幕上高效、清晰的UI呈现。

    4、高效的移动应用开发调试

    使用React Native开发,修改了代码后立刻可以在手机上看到效果,没有重新编译启动程序所需要的时间。

    5、灵活高效的应用热更新

    开发者可以在用户基本无感知的情况下加入新界面、新功能与新的业务逻辑。

    6、有效降低移动应用安装包体积

    移动应用功能越复杂,RN安装包相比原生代码安装包就越小。

    7、学习门槛低、开发难度低

    (1)开发语言简单

    React Native使用ES6语言,以及自创的JSX语言进行的开发。

    (2)语法接近自然语言

    React Native开发中的函数名、变量名都采用类似于自然语言的命名法,便于记忆,语言的含义基本上可以直接推断与理解。

    (3)积木式UI开发

    不论是设计还是实现,通过React Native框架都能做到结构清晰、开发难度低、可读性高、后期修改维护方便。

    8、开发硬件要求低

    React Native开发用的软件都是可免费下载、安装使用的正版软件,部分是开源软件,对硬件要求也不高。

    9、使用React Native开发的代价

    为了得到React Native开发的优点,使用React Native开发的APP也需要付出一定的代价。

    (1)内存消耗大

    使用React Native开发的程序运行所需的内存比原生代码开发的程序略多。

    (2)运行速度

    使用React Native开发的代码运行速度比原生代码略慢。


    转载于:https://www.jianshu.com/p/ca294ca9f5d4

    react-native官网:https://reactnative.cn/docs/0.45/getting-started/

    展开全文
  • 搭建React Native环境 1、创建React Native项目 创建文件并进入RnDemo mkdir RnDemo 创建项目 react-native init RnDemo 2、用VSCode配置安装 如图(这是我根据自己需要添加的) 3、添加项目 点击打开 如图 4、...

    准备工作:

    • 安装 VSCode
    • 搭建React Native环境

    1、创建React Native项目

    • 创建文件并进入RnDemo mkdir RnDemo
    • 创建项目 react-native init RnDemo

    2、用VSCode配置安装 如图(这是我根据自己需要添加的)
    在这里插入图片描述
    3、添加项目 点击打开 如图
    在这里插入图片描述
    4、添加配置
    在这里插入图片描述
    然后会出现下图配置文件
    在这里插入图片描述
    选择如图
    在这里插入图片描述
    最后运行
    (1)可以点击下图运行
    在这里插入图片描述
    (2)直接终端运行 进入项目目录 输入 react-native run-ios

    **这个地方注意  服务一定要打开  如果没有开 可以自己打开如图** 
    

    在这里插入图片描述

    运行结果 在这里插入图片描述
    按住 command+d 弹出下图 可以进行选择
    在这里插入图片描述
    OK 完成 谢谢

    展开全文
  • 在初始化创建项目并通过yarn add react-navigation和yarn add react-native-gesture-handler加载导航依赖包时,这两个过程一切正常,但当执行react-native link react-native-gesture-handler进行原生依赖时,...

    这里先说明一下,由于本博主在创建项目的时候RN的0.59.1刚发布,以RN的一贯尿性必然要会存在不少问题,亲测RN的0.59.1会提示javascript版本与react-native版本不匹配,退回到0.58的最后一个版本0.58.6之后,运行正常。

    接下来进入主题,说下遇到问题和解决问题的过程:
    在初始化创建项目并通过yarn add react-navigationyarn add react-native-gesture-handler加载导航依赖包时,这两个过程一切正常,但当执行react-native link react-native-gesture-handler进行原生依赖时,喜出望外了+_+!!!:
    不废话,直接上解决办法:执行npm install react-native-gesture-handler@latest --save ,然后重新link:react-native link react-native-gesture-handler
    error Failed to get dependency config
    更新之后:在这里插入图片描述
    这应该是yarn对包的管理存在问题导致的…,遇到步骤都按官方要求执行完亦然莫名其妙报错,可以试试不用yarn而用npm来进行包的管理。

    展开全文
  • 小白尝新,第一次运行RN导出的源码,app.gradle中报错,异常显示找不到这两个文件, 作为第一次运行RN编译代码的...apply from: "../../node_modules/react-native/react.gradle" apply from: "../../node_modules/rea...
  • 因为后边要做rn项目,所以...react-native 需要的依赖的环境:node, python2, jdk,react-native-cli. 这里需要注意,python必须是2,jdk必须是1.8以上,jdk遇到过坑,因为本地安装了多个版本的jdk,使用java -ve...
  • WebStorm是一款前端开发工具,也可以用于React Native项目 下载安装WebStorm WebStorm下载地址 安装完不要运行webstrom 下载破解补丁 打开网址(IntelliJ IDEA 注册码),下载补丁 然后将补丁...
  • React Native环境搭建及项目生成运行 React官方网址: https://reactnative.cn/ 必须安装的依赖有:Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。 注意 :Node 的版本必须高于 8.3,Python ...
  • 学习react-native就跟当初学习android一样,环境搭建完毕,代码也不知道怎么写,如果也没有demo运行一下看看这是个什么东西,总觉得RN很神秘复杂的样子。FaceBook官方早已经给我们准备了很好的学习资料,就是github...
  • android studio直接运行react-native项目时报错 make sure you're either running a metro server(run 'react-native start') 解决办法: You haven't started the bundler yet. Runnpm startorreact-native ...
  • React Native / React调试技巧 做过原生APP开发的同学们都清楚,我们在Xcode和studio中就可以直接对编写的代码进行断点调试,很方便,但是web开发断点调试就不能直接在开发工具中完成了,需要借助浏览器来完成,...
  • 1.点击WebStorm右上方的下拉箭头弹出的Edit Configurations.... 2.然后会进入一个配置页面.点击左上方的+.在弹出的列表中选中npm.如图. ...3.在右边的配置框中,先选择Command为help.... Name为该按...
  • Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端框架。本篇主要是从分析代码入手,探讨一下RN在安卓平台上是如何构建...
  • 以前开发react native项目总是需要打开WebStorm编写代码,Xcode跑项目.显得有点多余.今天教大家如何直接使用WebStorm这个IDE直接完成编码+运行项目工作.这样就可以不用打开Xcode了.1.首先点击WebStorm右上方的下拉...
  • 网上有很多react-native的入门教程,当然坑也很多。一方面是到处拼凑起来的资料,没有实际运行,很可能是有问题的;另一方面,对配置和运行中出现的问题没有详细介绍怎么解决(也可能是人家运气好,没有碰上)。 我...
  • React Native简介和环境...今天来介绍如何使用AndroidStudio来运行React-Native项目; 1.AndroidStudio打开RN项目 AndroidStudio 打开或导入项目目录下的andriod目录即可; 2. AndroidStudio配置gradle、sdk、b...
  • react-native : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\react-native.ps1,因为在此系统上禁止运行脚本 错误,这是因为权限问题导致的 解决方法:找到powershell,使用管理员权限运行,然后输入s
  • React-Native 集成react-navigation(导航组件) 1、创建测试项目navTest #使用命令 react-native init navTest #使用webstrom创建 2、安装react-navigation #安装 yarn add react-navigation # or npm install --...
1 2 3 4 5 ... 20
收藏数 23,492
精华内容 9,396
关键字:

native 运行react