时间戳

首页 > 解决方案 > 再次渲染 react-native 应用程序 Web-View

react-native - 再次渲染 react-native 应用程序 Web-View

问题描述

我有一个带有 webview 的 react-native 应用程序。当我单击通知时，我想转到预定义页面（导航到页面），但应用程序不呈现新视图。这是我打开应用程序时的代码（没有通知点击）：

return (
  <WebView
    automaticallyAdjustContentInsets={false}
    source={{
      uri: 'https://my-url/',
    }}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    startInLoadingState={true}
    style={{
      marginTop: 25,
    }}
  />
);

而且，当我点击通知时：

return (
  <WebView
    automaticallyAdjustContentInsets={false}
    source={{
      uri: 'https://my-url/new',
    }}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    startInLoadingState={true}
    style={{
      marginTop: 25,
    }}
  />
);

当我点击通知时，应用程序再次在 https://my-url 中打开。

单击通知时，我想在 https://my-url/new 上导航。

你能帮我么？

标签： react-nativewebview

解决方案

使用 state 设置 webview 的 url。当状态改变时，webview 将使用更新的 url 重新加载。

使用“https://my-url/”初始化 url 状态

假设您正在使用类组件，请在构造函数中设置初始 url。

constructor(props) {
    super(props);

    this.state = {
        url: 'https://my-url/'
    }
}

当您单击通知时，使用所需的 url 设置状态。

onNotification: function(notification) {
    this.setState({
        url: 'https://my-url/new'
    })
}

这应该在 webview 中呈现预定义的页面

return (
  <WebView
    automaticallyAdjustContentInsets={false}
    source={{
      uri: this.state.url,
    }}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    startInLoadingState={true}
    style={{
      marginTop: 25,
    }}
  />
);

推荐阅读