在 React Native WebView 中添加自定义 html 标签

Question

我目前正在 Webview 中呈现 HTML 内容。 该 HTML 内容托管在云中并使用 html 链接加载到 Webview 中。 在这里，我需要在动态呈现时在该内容中添加以下复选框标记，或者我需要在页面底部显示复选框。

<div>
    <input type="checkbox" id="agreement_id" name="agreement" value="agreement">
    <label for="other">I have read and accept the Electronic Communications Agreement consenting to the use of Electronic Records in connection with opening my new deposit credit accounts requested through the Swell mobile app.</label>
</div>

是否可以在 React Native Webview 中以编程方式添加？

Answer 1

我在这里找到了答案：使用了injectedJavaScript 。

const scripts1 = document.write(
  '<div> <input type="checkbox" id="agreement_id" name="agreement" value="agreement"> <label for="other">content</label> </div>',
);

const webviewContent = () => {
  return (
    <View
      style={{
        height: windowHeight - heightBottom * 1.5,
        marginLeft: 10,
        marginRight: 10,
      }}>
      <WebView
        style={{backgroundColor: colors.primaryBackgroundColor}}
        originWhitelist={['*']}
        source={{
          uri: 'https://www.google.com',
        }}
        injectedJavaScript={scripts1}
      />
    </View>
  );
};