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

在render方法中，您可以定義條件，如下例所示。 例如，您可以在componentDidMount方法中檢查您的連接，然后設置您的道具。

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

Answer 3

如果它特定於WebView，則此組件包含兩個渲染功能。

renderError函數

返回視圖以顯示是否存在錯誤的函數。

renderLoading函數

返回加載指示符的函數。

WebView組件文檔。

使用renderError函數，您可以返回一個視圖，指出存在錯誤，包括應用程序未連接到互聯網。