[ 卡卡 DAY 19 ] - React Native 用 react-native-webview 实现 webview 跟 html render

在 App 需求中
若页面需要通过 URL 渲染远端 HTML 页面
若页面资料提供的是 html 字串
在 React Native 该怎麽做呢？
开始来用 react-native-webview 吧！

原本 WebView 是原生的，後来为了减小 React Native 核心包的体积，便将其单独提出到 react-native-webview

开始安装

npm i react-native-webview
cd ios
pod install

实作 webview

create component for webview, components/ 建立 WebViewComponent.js 引入套件

import { WebView } from 'react-native-webview';

建立 pure component 读取 props

const WebViewComponent = props => {
  return <WebView source={{uri: props.source}} />;
};

export default WebViewComponent;

在 screens/ 建立一个 WebViewScreen.js 的页面 source 放入网址

这里有个关键要注意！！
WebView 预设的高度是 0，所以若外层没给予高度无法显示画面
所以须於外层包一个元件
View / ScrollView / SafeAreaView
并且给予 style={{flex:1}} 占全满画面

import React from 'react';
import WebViewComponent from '../components/WebViewComponent';
import {View} from 'react-native';
const WebViewScreen = () => {
  return (
    <View style={{flex: 1}}> //注意！！
      <WebViewComponent source="https://paradisemrch.github.io/beka/" />
    </View>
  );
};
export default WebViewScreen;

下指令

npm run ios

塔罗卡卡

btw 要算塔罗可以找卡卡唷！塔罗卡卡 <3 欢迎预约

实作 html render

props

originWhitelist - 如果用户点击导航到新页面但新页面不在此白名单中，则该 URL 将由操作系统处理。
default 的白名单是 “http:// ” 和 “https:// ”
我们可以自己设定
像是 originWhitelist = { [ ' https:/ /* ' , ' git://* ' ] } />
也或着 originWhitelist={["*"]}
source 换为 html
injectedJavaScript 在加载时注入网页的 js，window.ReactNativeWebView.postMessage(document.documentElement.scrollHeight) 用来侦测内容高度
onMessage webview 调用时调用的函数

深入 props 可以参考此 doc

於 source 直接放入 html 档案
meta name="viewport" content="width=device-width, initial-scale=1.0"
这个是个关键！！！才可以读取 html style

<WebView
    originWhitelist={["*"]}
    source={{
        html:
        `<html>
            <head>
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
            </head>
            <body>
              <p>这里是一个标题</p>
            </body>
        </html>`,
    }}
     injectedJavaScript="window.ReactNativeWebView.postMessage(document.documentElement.scrollHeight)"
    onMessage={onWebViewMessage}
/>

function onWebViewMessage
回调存入 webViewHeight

  const [webViewHeight, setWebViewHeight] = React.useState(0);
  const onWebViewMessage = (event) => {
    setWebViewHeight(Number(event.nativeEvent.data));
  };