• 创建react-native项目

    2017-05-31 16:42:34
    1、删除C:\Users\user\.yarnrc,C:\...2、命令行中输入:react-native init demo 3、cd demo 4、react-native run-android 5、第一次等待编译完成 6、本地访问这个页面:http://localhost:8081/index.android.bun

    1、删除C:\Users\user\.yarnrc,C:\Users\user\.node_repl_history这两个文件

    2、命令行中输入:react-native init demo

    3、cd demo

    4、react-native run-android

    5、第一次等待编译完成

    6、本地访问这个页面:http://localhost:8081/index.android.bundle?platform=android,结果如下所示,代表成功:

    7、使用Android Studio访问,出现如下即可

    展开全文
  • react-native 项目

    1、创建项目

    进入你所想生成项目的路径终端执行
    react-native init Test
    这里写图片描述

    因为初始化要经过node-gyp编辑,从nodejs下载源码 国内被墙,所以可以替换资源 如淘宝的。
    替换镜像资源

    终端下执行使用淘宝镜像。
    npm config set registry=http://registry.npm.taobao.org/

    2、创建成功后配置使用Android Studio 打开文件直接运行错误

    这里写图片描述

    错误日志:

    这里写图片描述

    错误原因没有启动服务器,在命令行使用 npm start 或者 react-native start来启动服务器打包到本地服务器。

    再次运行app,运行成功 注意在运行时刻必须保持服务器的运行状态
    这里写图片描述

    3、常用的管理react-native 版本

    • 查看命令react-native –version
    • 更新版本命令 npm update -g react-native-cli
    • 查询npm最新版本npm info react-native
    • 指定插入某个版本 npm install –save react-native@版本号
    展开全文
  • 在初识react-native项目上,因为个人从事前后端的开发,使用idea比较方便, 环境搭建 下载node.js 网址:https://nodejs.org/en/ 安装完成后,进入cmd命令行窗口,输入 node -v和npm -v; 备注:如若出现...

    在初识react-native项目上,因为个人热衷于idea,比较熟悉,决定用这一Ide创建任何前后端的项目。

    环境搭建

    react-native运行环境要求准备:
    1. node.js
    2. python2
    3. Android sdk
    4. react-native-cli
    5. jdk
    6. idea编译软件
    7. 小米mix2手机一部(博主使用)
    8. 夜神模拟器
    一、 下载node.js

    网址:https://nodejs.org/en/
    这里写图片描述
    安装完成后,进入cmd命令行窗口,输入 node -v和npm -v;
    这里写图片描述
    备注:如若出现node不是内部程序等错误,检查及添加环境变量,如若环境变量没问题;

    小窍门:重启电脑

    下面其它环境变量的配置也是一样的,如若环境变量配置什么的都没错,就重启下电脑,直到有正确结果。
    二、下载python2

    网址: https://www.python.org/downloads/windows/
    这里写图片描述
    下载安装,记得勾选add to path,进入cmd控制台,输入 python –version查看
    这里写图片描述

    三、下载Android SDK并进行配置

    网址: http://sdk.android-studio.org/
    这里写图片描述
    下载完成后,安装,我个人是安装在目录 E:\devsoftWare\AndroidSdk下
    这里写图片描述
    接下来进行Android的环境变量配置,发现很多教程这一部分都很模糊。
    设置环境变量,在系统变量中添加变量名:ANDROID_HOME 变量值: E:\devsoftWare\AndroidSdk
    这里写图片描述
    系统变量中添加变量名:Path变量值: E:\devsoftWare\AndroidSdk\tools
    这里写图片描述
    用户变量中添加变量名:Path变量值: %ANDROID_HOME%\platform-tools
    这里写图片描述
    进入cmd命令行窗口,输入 adb -version;
    这里写图片描述
    若出现环境变量问题,还需查阅资料解决
    reactNative sdk安装插件
    进入AndroidSdk安装目录,打开SDK Manager
    这里写图片描述
    安装如下图出现的包,最好自己用vpn下载,能够快一点
    这里写图片描述
    这里写图片描述

    注意:在后面运行react-native程序中可能有跟安装所需要的插件不符的错误,大家学会以错误入手进行解决

    四、安装react-native-cli
    第一步:设置npm代理(可略过)
    第二步:安装react-native-cli
    • npm install -g react-native-cli (注意不要这么安装,因为版本号是2.0.1+,到后期运行react-native项目会报错,如果已经安装的小伙伴,需将其卸载,安装指定版本的)
    • 卸载已经安装的react-native-cli
    • npm uninstall -g react-native-cli
    • npm install react-native@0.55.4 (这个版本博主在用,可行)
    • npm instal -g react-native-cli@1.2.0 (这个版本博主在用,可行)
    第三步:验证版本
    • react-native –version
      这里写图片描述
      出现如上图所示表示安装成功
    五、安装jdk
    展开全文
  • 创建项目 react-native init ReactDemo 通过npm安装最新版本 npm install 项目的android->app->src->main目录下创建一个名为assets空文件夹,执行如下命令 react-native bundle --platform ...

    需要先安装npm

    创建项目

    react-native init ReactDemo 
    

    通过npm安装最新版本

    npm install
    

    项目的android->app->src->main目录下创建一个名为assets空文件夹,执行如下命令

    react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
    

    运行android项目

    默认运行debug版本

    react-native run-android 
    

    运行release版本

      react-native run-android --variant=release 
    

    我们摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,
    设置IP和端口(本机地址)。如:192.168.0.107:8081

    修改完js文件,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,可查看修改

    ===================================================

    注意Android5.0以上版本命令方式:

    打开Android SDK目录 xxx\Android\sdk\platform-tools。在当前文件路径呼出命令行,输入:

    adb reverse tcp:8081 tcp:8081
    

    点击Reload JS 即可成功拉取ReactNative bundle。

    ===================================================

    展开全文
  • 以更新项目react-native0.56.0更新为react-native0.55.4版本为例 1 通过指令 进入项目目录,依次输入下列指令: react-native run-android //卸载react-native npm uninstall react-native //安装0.55.4版本的...

    以更新项目react-native0.56.0更新为react-native0.55.4版本为例

    1 通过指令

    进入项目目录,依次输入下列指令:

    react-native run-android
    //卸载react-native
    npm uninstall react-native
    //安装0.55.4版本的react-native
    npm install --save react-native@0.55.4
    react-native run-android
    npm install --save babel-core@latest babel-loader@latest
    npm uninstall --save babel-preset-react-native
    npm install --save babel-preset-react-native@4.0.0
    react-native run-android

    2 通过修改package.json

    打开项目目录中的package.json文件,

    1 dependencies修改为:

     "dependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-react-native": "^4.0.0",
        "react": "16.4.1",
        "react-native": "^0.55.4"
      },

    2 devDependencies修改:

    删除 "babel-preset-react-native": "5.0.2",

    3. 然后执行:npm install

    文件对比:

     

    展开全文
  • 很多时候都是使用同一套架构,基本不会发生很多变化,有没有什么方法,能够进行批量化搭建项目,在react-native中就有一个简单的方法,搭建属于自己的模板方法,那就是使用命令行--template进行创建项目 常规...
  • React-Native集成JPush-react-native及应用设置Tags、Alias(iOS/Android)最近项目中用到推送功能,且项目是以React-Native框架实现iOS、Android跨平台开发,自然而然就选择了极光实现推送功能,由于以前是iOS开发...
  • 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 ...
  • expo搭建react-native项目

    2018-12-03 11:15:41
    react-native官网中推荐开发使用expo去开发和真机启动项目。 在项目中可以使用expo的脚手架expo-cli去搭建,也可以使用create-react-native-app 脚手架去搭建。博客中使用的后者。前者可以参考官网 Get Started 全局...
  • 目录很简单介绍点啥下载开发工具和组件初始化项目在这个过程中就有坑了,注意启动项目-Android启动项目-iOS 介绍点啥 网上有很多react-native的入门教程,当然坑也很多。一方面是到处拼凑起来的资料,没有实际运行,...
  • 简单介绍下react-native-webview 替换 react-native 自带的 webview 的过程中 遇到的问题。 基于版本: "react-native": "0.60.6", "react-native-webview": "^7.4.2", 1、安装及使用方法就省略了,可以看下...
  • 由于前段时间写了一个React-Native项目Mung,里面有一个图片浏览的功能,一般图片浏览都需要放大缩小和左右滑动,后来找了两个这方面比较好的控件react-native-gallery和react-native-image-viewer,但他们都有些...
  • 1.先给项目添加该库; npm install --save react-native-vector-icons 配置: 1.自动配置:(我这边使用这种配置方法报错了,然后使用的下面手动配置方法) react-native link react-native-vector-icons 2...
  • 最近在写react-native项目,在项目部署过程中,执行npx react-native run-android命令,node会一直停滞在Loading dependency graph, done.上,所以不能及时更新 造成这个问题的原因是react-native的默认端口8081被...
  • 在初始化创建项目并通过yarn add react-navigation和yarn add react-native-gesture-handler加载导航依赖包时,这两个过程一切正常,但当执行react-native link react-native-gesture-handler进行原生依赖时,...
  • 因为后边要做rn项目,所以需要搭建下环境,过程中遇到很多问题,特记录下来。 首先我是按照react-native中文网官方提供的教程进行进行安装的。 react-native 需要的依赖的环境:node, python2, jdk,react-native-...
  • 通过npm安装react-native-swiper $ npm install react-native-swiper --save $ npm i react-timer-mixin --save 二.在项目中导入 import Swiper from 'react-native-swiper'; 三.使用 render(){ return
  • create-react-native-app "项目名称" 和react-native init '项目名称'
  • React-Native 与Iconfont整合 1、从阿里妈妈上选择自己所需要的素材,下载源代码 http://www.iconfont.cn/ 下载后得到的iconfont.ttf iconfont.svg.js即为所需文件 两种解决方案: react-native-vector-...
  • react-native使用第三方库以及引入react-native-elements 1.首先需要下载依赖包到本地 cd /project yarn add react-native-elements # or with npm npm install react-native-elements 2.引入react-native-...
1 2 3 4 5 ... 20
收藏数 32,101
精华内容 12,840