运行React-Native例子UIExplorer

亦凉 2022-08-18 15:19 39阅读 0赞

运行 FaceBook 给出的例子UIExplorer, 由于网络问题折腾了半天, 在公司网络死活不行,到家一小会儿搞定. 原因是我使用 npm install 的时候 直接 `ctrl+c` 断掉了, 需要把目录下的`node_modules`文件夹删除再重新安装.

### 关于NPM ###

[NPM小结][NPM]

### react-native 环境 ###

参考前面:[Ubuntu进行 react-native 的开发][Ubuntu_ react-native]

### APK运行到模拟器 ###

git clone https://github.com/facebook/react-native.git
    cd react-native
    npm install

`npm install` 过程需要下载大约 100多兆的依赖, 所以看网络情况咯

cd react-native
    ./gradlew :Examples:UIExplorer:android:app:installDebug
    ./packager/packager.sh

注意,使用`packager.sh` 开启server.  
然后利用 `gradlew`命令编译apk

![模拟器][7edbed81-477e-4173-8ea4-f5d0ac0988b7.png]

### 运行到真机 ###

1.  真机开启USB调试
2.  必须关掉模拟器, react-native要求同时只能连接一个设备, 可以通过 `abd devices`查看连接个数
3.  `adb reverse tcp:8081 tcp:8081`  
    手机必须和电脑在同一个局域网, 然后把手机无线的代理设置为电脑的ip:8081
4.  然后可以安装到真机了

cd react-native
    ./gradlew :Examples:UIExplorer:android:app:installDebug
    ./packager/packager.sh

![真机][b78d351b-bc3f-40b5-840a-db8a82153fa2.png]

文章出处: [http://hanks.xyz][http_hanks.xyz]

[NPM]: http://www.cnblogs.com/chyingp/p/npm.html?utm_source=tuicool&utm_medium=referral
[Ubuntu_ react-native]: http://hanks.xyz/2015/12/15/react-native-start-md/
[7edbed81-477e-4173-8ea4-f5d0ac0988b7.png]: https://dn-coding-net-production-pp.qbox.me/7edbed81-477e-4173-8ea4-f5d0ac0988b7.png
[b78d351b-bc3f-40b5-840a-db8a82153fa2.png]: https://dn-coding-net-production-pp.qbox.me/b78d351b-bc3f-40b5-840a-db8a82153fa2.png
[http_hanks.xyz]: http://hanks.xyz

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关 ReactNative进阶（一）：ReactNative学习资料汇总

文章目录序前言常见问题【MAC】打不开“XXXX Installer”，因为它来自身份不明的开发者。

电玩女神/ 2023年01月19日 03:09/ 0 赞/ 276 阅读

相关 ReactNative进阶（六）：ReactNative语法学习

前言对于第一次接触`ReactNative`的同学，最痛苦的是什么时候使用`{}`，什么时候使用`()`,当然我也经历过那段时间，为此简单总结了下。 `Reac

我会带着你远行/ 2023年01月15日 13:26/ 0 赞/ 256 阅读

相关 ReactNative阴影

ReactNative阴影 1. 文字阴影 2. 块阴影 2.1 ios阴影 2.2 android阴影 1. 文字阴影文

Myth丶恋晨/ 2022年11月06日 03:57/ 0 赞/ 302 阅读

相关 ReactNative Demo -SearchInput

import React, { Component } from 'react'; import { AppRe

╰半橙微兮°/ 2022年09月23日 14:00/ 0 赞/ 234 阅读

相关 ReactNative GIF

默认使用GIF图都只会显示第一帧的静态画面。在RN中使用GIF，需要在build.gradle中添加: implementation 'com.facebook.

谁践踏了优雅/ 2022年08月31日 07:11/ 0 赞/ 274 阅读

相关运行React-Native例子UIExplorer

运行 FaceBook 给出的例子UIExplorer, 由于网络问题折腾了半天, 在公司网络死活不行,到家一小会儿搞定. 原因是我使用 npm install 的时候直接

亦凉/ 2022年08月18日 15:19/ 0 赞/ 40 阅读

相关 ReactNative 概述

近期看了下React Native ，整理了下简介支持平台：Native App([IOS][]、[Android][]) 开发语言：[JSX][]、[

Myth丶恋晨/ 2022年08月07日 12:45/ 0 赞/ 280 阅读

相关 ReactNative iOS运行再次出错：No bundle URL present

React Native iOS去运行，结果又遇到： No bundle URL present Make sure you’re running a packager s

柔情只为你懂/ 2022年06月17日 12:20/ 0 赞/ 674 阅读

相关 ReactNative

[React Native可伸缩列表封装与快速实现方案][React Native] React Native快速封装一个类似qq好友列表的可伸缩列表，一点经验分享

朴灿烈づ我的快乐病毒、/ 2022年06月04日 07:35/ 0 赞/ 431 阅读

相关 ReactNative 升级

> 这里主要记录的是 react native（0.46.4）升级到(0.50.1)的情况。react-native react 之间对应版本关系[链接地址][Link 1]

绝地灬酷狼/ 2022年01月11日 03:15/ 0 赞/ 419 阅读