扩展React本机Web视图的设计

问题描述

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

例如：

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

我一直在使用props从客户端发送各种替代信息，但我该怎么做：

• 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()}
/>

解决方法

听起来像是您需要添加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。

让我知道这是否不是您要查找的内容或不够清晰。