React Native View Render

Question

如何有条件地呈现视图？示例：如果我的应用程序未连接到Internet - 渲染错误视图，如果已连接 - 渲染WebView？这可能与本机做出反应吗？我想渲染不纯的HTML

Answer 1

使用您的示例有条件地呈现视图的逻辑：

render() {
  if (!this.state.isConnected) { // error
    return (
      <View></View>
    );
  }
  else {
    return ( // webview
      <WebView />
    );
  }
}

Answer 2

在渲染方法中，您可以定义条件，如下例所示。例如，您可以在componentDidMount方法中检查您的连接，然后设置您的道具。

 render(){
          if(this.state.isConnected == 'Online' )
            return this.webView();
          else
            return this.renderAnotherView();
        }

Answer 3

如果它特定于WebView，则此组件包含两个渲染功能。

  

renderError 功能

     

返回视图以显示是否存在错误的函数。

     

renderLoading 功能

     

返回加载指示符的函数。

     

WebView Component Docs.

使用renderError功能，您可以返回一个显示错误的视图，包括该应用未连接到互联网。