Блог

Я хочу создать оболочку вокруг 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 переменные, возможно, на экране, который находится перед webview.

 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 или любой другой переменной, и когда ваш пользователь нажимает submit или что-то еще, вы можете передать эти переменные состояния себе webview в качестве реквизитов.

Дайте мне знать, если это не то, что вы ищете, или недостаточно ясно.