react native加载手机本地网页

前言

需求是，在项目本地或者手机储存卡里存放一个html的网页,然后在react native里面用webview去加载，如果是个简单的网页,那就很简单,把网页文件或者文件夹放到项目的根目录,然后在代码里面引入改路径给webView的source即可,Android跟ios略有不同，Android需要把网页文件复制到android/app/src/main/assets里面一份(没有assets就创建该文件夹)  引入方式如下

 <WebView
     source={
         Platform.OS === 'ios'?
         require('../xxx.html'):
              {uri: 'file:///android_asset/xxx.html'}
     }
     javaScriptEnabled={true}
  />

 

上面是普通网页可以这样在React Native里面用webView加载, 如果是一款小游戏,那这样就行不通了,需要提供一个手机本地服务去供游戏去运行,开启本地server，ios的先不谈,Android这边开启本地服务可以自己实现，也可以用第三方库 这里推荐一款名为 AndServer 的本地服务器库，是严振杰大神写的 非常的好用。

大致流程是 在原生里面声明一个函数，在函数里面开启本地服务,在js里面调用原生的这个函数,传一个回调对象过来,然后把html的访问接口回调给js（这里涉及到原生与react native互相调用 如果不懂可以去react native官网了解） 然后在js里面用webview去加载这个地址,我把该功能封装成了一个react native的插件 方便大家使用

源码链接: https://github.com/duguodong258/RNLocalServer

使用

1. 添加依赖

npm i react-native-andserver

//或
yarn add react-native-andserver

2.开启本地server

import { NativeModules } from 'react-native'

//开启本地server
NativeModules.RNAndServer.startLocalServer()


//停止本地server
NativeModules.RNAndServer.stopLocalServer()

这里可以在一个点击事件里面去调用这段代码,如果成功开启会有吐丝提示 如果失败也会有吐丝查看具体失败原因

然后我们就可以在js这边定义个方法跟原生去交互了，首先在原生项目的 main 目录下创建一个名为 assets 的文件夹 在里面放一款h5小游戏

assets文件夹下的接口地址就是 http://本机ip:8080/ 

端口是我插件里面初始化本地服务器的时候指定的8080

因此该游戏的接口地址就是

http://127.0.0.1:8080/src/freakxapps.com/demo/me/piggy-night5/index.html

当我们知道这个地址之后,就可以把这个地址回调给react native了，然后在react native里面收到地址 直接拿去用webView加载即可,

react native里面的webview默认是未开启支持js 因此需要设置该属性为true

androidjavaScriptEnabled={true}

 最后附上一张效果图: