exp运行react-native项目
2018-09-26 17:52:47 u010127332 阅读数 1104

WebStorm是一款前端开发工具,也可以用于React Native项目

  • 下载安装WebStorm

WebStorm下载地址
安装完不要运行webstrom

  • 下载破解补丁

打开网址(IntelliJ IDEA 注册码),下载补丁
图0
然后将补丁复制到安装目录的bin目录下,例如:D:\Program Files\JetBrains\WebStorm 2018.2.3\bin
图1

  • 修改路径

修改bin目录下的 WebStorm.exe.vmoptions 和WebStorm64.exe.vmoptions
图2
用文本编辑器打开之后,在文件最上面加一行代码
-javaagent:D:\Program Files\JetBrains\WebStorm 2018.2.3\bin\JetbrainsCrack-3.1-release-enc.jar
配置好之后,保存文件,启动WebStorm。

  • 获取激活码

打开网址(IntelliJ IDEA 注册码),直接点击获取激活码,将生成的激活码粘贴到WebStorm激活对话框中的【Lisence Code】输入框,点击OK即可破解。
图3
4

  • WebStrom运行RN项目

打开上篇文章创建好的AwesomeProject项目
点击右上角的Add Configuration
图5
添加配置
在这里插入图片描述
添加成功后,取名为Android
在这里插入图片描述
点击右上角的“绿色三角”运行该项目
在这里插入图片描述
运行结果
在这里插入图片描述

文章前半部分参考:https://blog.csdn.net/voke_/article/details/76418116

2018-08-26 08:13:34 niuba123456 阅读数 250

目录

1.创建新项目

2. 运行流程

3. 流程图


1.创建新项目

## RNApp 项目名称
react-native init RNApp --version 0.55.4

参考:创建指定版本的react-native项目

2. 运行流程

1. run-android运行

react-native run-android

run-android运行后从项目目录的node_modules文件扫描系统链接文件夹,然后启动JS 服务器(Metro Bundler);

2. 然后运行Android项目的MainApplication文件:

  @Override
    protected String getJSMainModuleName() {
      return "index";
    }

这里设置返回主组件的js文件,确定用于从服务器获取JS的URL;

index指向package.json同目录下的index.js文件;

3. 然后运行MainActivity文件:

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "RNApp";
    }
}

返回从JavaScript注册的主组件的名称,呈现主组件;

4. 通过getMainComponentName()获取注册组件

通过MainActivitygetMainComponentName()返回的RNAppMainApplication文件getJSMainModuleName()返回的js文件中查找注册组件,然后开始启动js文件;

index.js注册了RNApp

AppRegistry.registerComponent('RNApp', () => App);

3. 流程图

 

2019-02-18 14:56:31 weixin_39500025 阅读数 17

创建ReactNative项目

使用如下命令创建项目:

react-native init Demo(所要创建的项目名称)

项目构建完成之后的目录:
在这里插入图片描述

运行ReactNative项目

使用命令:

react-native run-android

运行项目
Android设备,运行项目成功之后,摇一摇出现弹框,选择Dev Settings,之后选择Debug server host & port for device设置ip和端口号。例如:192.168.1.2:8081,端口号默认是8081

2017-09-07 12:29:00 weixin_34314962 阅读数 26

前言:由于Android自带的AVD模拟器运行速度慢,使用genymotion模拟器还要安装其他软件并且可能出现一些未知的错误,所以建议采用Android真机运行。以下操作建立在搭建好ReactNactive环境的前提下。

通过USB将手机和电脑连接,打开手机上的USB调试

如何开启USB调试?(Android手机型号众多,可能方式不太一样,这里以小米手机为例)

点击进入  设置->关于手机,连续点击几次MIUI版本,触发开发者模式。

2900539-eebcd9df54538ff3.png

进入 设置->其他高级设置,就可以看到开发者选项了,在开发者选项里打开USB调试,之后弹出一个提示窗口,点击确定。

2900539-142a778dad928647.png
2900539-d175e89e8a00c77d.png
2900539-5169c6c5866df5e8.png

这时在cmd命令行或Cygwin输入adb devices就可以看到设备已连接

2900539-16c837bf0318e95d.png

运行RN项目时,手机和电脑USB连接并且电脑和手机设备在同一个Wifi网络环境下。

跟在模拟器运行时的方式差不多,在Cygwin输入npm start,接着再开一个窗口输入react-native  run-android。如果手机没有打开USB调试,则会报异常。

2900539-3cb8542ed976b24b.png

部署成功如下图所示:

2900539-f0b3ddfbfbb09830.png

在真机上运行时可能会遇到白屏的情况,请找到并开启悬浮窗权限。比如小米系统的

设置->其他应用管理->(项目名:Myproject)->权限管理->显示悬浮窗

2900539-c4c78a9af43adab8.png

重新打开项目时会出现如下:

2900539-72a43b889a9859f7.png

让调试用电脑和你的手机必须处于相同的 WiFi 网络中下

1.摇晃手机(也可以按menu键,不过现在较新版的手机已经去除这个键了)

2.点击Dev Settings

3.点击Debug server host&port for devices

输入 ip地址:端口号, 如10.10.10.133:8081

Ip地址根据本机而定,端口号固定为8081

4.点击Reload JS

最终进入到RN项目的主页了

以后再运行项目时,可不必用USB连接。直接先在命令行输入npm start,接着在手机的项目上点击Reload JS就可以了,前提是手机和电脑需使用同一wifi。(Android 5.0以上及更高版本,可以使用adb reverse命令连接,命令行运行

db reverse tcp:8081 tcp:8081

来源http://www.cnblogs.com/unbelievable/p/6683434.html

参考http://blog.csdn.net/wds1181977/article/details/53418219

2019-06-19 11:35:16 u013983033 阅读数 62

准备工作:

  • 安装 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 完成 谢谢

没有更多推荐了,返回首页