Window使用AndroidStudio集成ReactNative环境及注意事项

参考来源

必须安装的依赖有:Nodejs、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。

Nodejs 和 Python 傻瓜式一步步安装,都需要设置path环境变量。
Node 的版本必须大于等于 10,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。
安装完 Node 后需要设置 npm 镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
arn、React Native 的命令行工具(react-native-cli)

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
命令行执行下面命令安装yarn:

npm install -g yarn react-native-cli 

安装完 yarn 后同理也要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
Android 开发环境
安装jdk和Android Studio,并下载sdk;

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选 Show Package Details。展开Android 9 (Pie)选项,确保勾选了下面这些组件。

然后点击"SDK Tools"选项卡,同样勾中右下角的 “Show Package Details”。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

配置 ANDROID_HOME 环境变量

创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

SDK 默认是安装在下面的目录:
c:\Users\你的用户名\AppData\Local\Android\Sdk

关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。

把 platform-tools 目录添加到环境变量 Path 中

添加环境变量,选中path变量,然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。

此目录的默认路径为:
c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools

创建新项目

进入你的工作目录,运行:

react-native init MyProject

创建完毕后,运行packager:

react-native start

可以用浏览器访问http://localhost:8081/index.bundle?platform=android看看是否可以看到打包后的脚本(看到很长的js代码就对了)。第一次访问通常需要十几秒,并且在packager的命令行可以看到形如[====]的进度条。

注意老版本(低于0.49)的地址为http://localhost:8081/index.android.bundle?platform=android

如果你遇到了ERROR Watcher took too long to load的报错,请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,将其中的MAX_WAIT_TIME 从25000改为更大的值(单位是毫秒)

安卓运行
保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖。

运行完毕后可以在模拟器或真机上看到应用自动启动了。

如果apk安装运行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native提供了一个名为`WebView`的组件,可以用来加载并运行HTML页面,并且可以与HTML页面中的JavaScript代码进行交互。使用WebView可以实现在React Native中调用JavaScript方法的功能,具体步骤如下: 1. 安装WebView组件:在React Native项目中执行`npm install react-native-webview`命令安装WebView组件。 2. 导入WebView组件:在需要使用WebView组件的文件中,使用`import { WebView } from 'react-native-webview';`语句导入WebView组件。 3. 在render()方法中使用WebView组件:使用`<WebView />`标签创建一个WebView组件,并设置`source`属性为HTML页面的URL或者本地文件路径。 4. 在JavaScript中定义需要调用的方法:在HTML页面中定义需要调用的JavaScript方法,并使用`window.ReactNativeWebView.postMessage()`方法向React Native发送消息。 5. 在React Native中调用JavaScript方法:使用WebView组件的`injectJavaScript()`方法向WebView中注入JavaScript代码,调用在HTML页面中定义的方法。 示例代码如下: ``` import React, { Component } from 'react'; import { WebView } from 'react-native-webview'; class MyWebView extends Component { onMessage = (event) => { const { data } = event.nativeEvent; // 收到HTML页面发送的消息 console.log(data); } render() { return ( <WebView source={{uri: 'https://example.com'}} onMessage={this.onMessage} /> ); } } export default MyWebView; ``` HTML页面代码: ``` <button onclick="sendMessage()">发送消息</button> <script> function sendMessage() { window.ReactNativeWebView.postMessage('Hello from HTML!'); } </script> ``` 在React Native中调用HTML页面中的`sendMessage()`方法: ``` webViewRef = React.createRef(); // 在componentDidMount()方法中获取WebView组件的引用 componentDidMount() { this.webViewRef.current.injectJavaScript(` sendMessage(); `); } ``` 上述代码通过在HTML页面中定义了一个`sendMessage()`方法,并使用`window.ReactNativeWebView.postMessage()`方法发送消息到React Native中。在React Native使用`injectJavaScript()`方法向WebView中注入JavaScript代码,调用HTML页面中的`sendMessage()`方法,从而实现了React Native调用JavaScript方法的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值