用于扩展反应原生 webview 的设计答案

【问题标题】：Design for extending react native webview用于扩展反应原生 webview 的设计
【发布时间】：2020-09-09 13:05:58
【问题描述】：

我想围绕 react-native webview 创建一个包装器，以便我提供一些默认值并且客户端可以覆盖它们。我还想为方法提供默认实现

例如：

<MyBaseWebView uri ={provided by user of MyBaseWebView}>
MyBaseWebView can have default implementations for onError etc.

我一直在使用道具从客户端发送各种覆盖，但我要为以下事情做些什么：

ref={this.setRNWebView}这只需要在其中一个孩子中
injectedJavaScript={this.injectedJavaScript()} 如果客户端不发送，我根本不想注入任何 javascript。我怎样才能做到这一点？

BaseWebView 类如下所示：

<WebView
  allowsInlineMediaPlayback={this.allowsInlineMediaPlayback()}
  ref={this.setRNWebView}
  source={{uri: uri}} // from prop
  mediaPlaybackRequiresUserAction={this.mediaPlaybackRequiresUserAction()}
  onMessage={this.onMessage}
  onError={this.onError}
  onLoad={this.onLoad}
  injectedJavaScript={this.injectedJavaScript()}
/>

【问题讨论】：

标签： reactjs react-native react-native-webview

【解决方案1】：

听起来你需要添加 state 变量，可能在 web 视图之前的屏幕上。

constructor(props) {
    super(props);
    this.state = {
      uri: "www.defaultUri.com",
      injectedJavascript: "", 
    };
  }

//then for example in a textInput in render() you could allow your 
//user to update these values

<TextInput
value={this.state.uri}
onChangeText={text => this.setState({uri: text})}/>

您可以对injectedJavascript 或任何其他变量执行相同操作，并且当您的用户点击提交或其他操作时，您可以将这些状态变量作为道具传递给您的webview。

如果这不是您要查找的内容或不够清楚，请告诉我。

【讨论】：