react-native-webview-load-from-device-local-file-system

react native webview加载本地html资源文件的解决方案

需求

• release可以工作（这个是必须的）
• 可以传query参数(暂不考虑其它方式实现传参)

测试环境

• macOS 10.12.3
• react-native v0.42

尝试方案1

const source = reuqire('./index.html');

工作情况：

-	android	ios
debug	ok	ok
release	not work	ok

缺点：

• 不能带query参数

结论：android只能在debug模式下使用，不可行。

尝试方案2

const source = Platform.OS === 'ios' ? require('./index.html') : { uri: 'file:///android_asset/index.html' };

工作情况：

-	android	ios
debug	not work	ok
release	ok	ok

缺点：

• ios不能带query参数

结论：release可行，但是ios端不能传参数。如果没有传参数需求，用这个方案即可。
如果想同时在android的debug环境下工作，根据__DEV__的值加个判断即可

尝试方案3

import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

const _source = resolveAssetSource(require('./index.html'));
const source = Platform.select({
  android: { uri: `file:///android_asset/index.html?id=${article.id}` },
  ios: { uri: `file://${_source.uri}?id=${article.id}` },
});

工作情况：

-	android	ios
debug	not work	not work
release	ok	ok

结论：release可行，可传参数！如果想同时在debug下工作，根据__DEV__的值加个判断即可

最终可行方案

普通方案：

一般情况下使用这个方案即可：

let source;
if (__DEV__) {
  source = require('./index.html');
} else {
  source = Platform.OS === 'ios' ? require('./index.html') : { uri: 'file:///android_asset/index.html' };
}

可传query方案：

可在uri后面加上query参数，如：path/to/file.html?page=1&page_size=10

import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

let source;
const _source = resolveAssetSource(require('./index.html'));
if (__DEV__) {
  source = { uri: `${_source.uri}&id=${article.id}` };
} else {
  const sourceAndroid = { uri: `file:///android_asset/index.html?id=${article.id}` };
  const sourceIOS = { uri: `file://${_source.uri}?id=${article.id}` };
  source = Platform.OS === 'ios' ? sourceIOS : sourceAndroid;
}

工作情况：

-	android	ios
debug	ok	ok
release	ok	ok

render:

<WebView source={source}  {...props} />

注意事项

• 以上html的路径根据自己的项目情况进行修改
• [android] react-native bundle时会把html文件当成drawable资源，请手动把android/res/drawable中的html文件删除，否则build时会报错
• 打包时候要手动把html和相关的css、js拷到对应的目录中,如
  [android]: android/app/src/main/assets/
  [ios]: ios/assets

转载需注明出处：https://blog.jeepeng.com/2017/react-native-webview-load-from-device-local-file-system/