反应本机视图渲染

Question

如何有条件地渲染视图？示例：如果我的应用程序未连接到互联网 - 呈现错误视图，如果已连接 - 呈现 WebView？ React Native 有可能吗？我要渲染不纯html

Answer 1

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

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

Answer 2

如果是特定于WebView，则此组件包含两个渲染函数。

renderError function

Function that returns a view to show if there's an error.

renderLoading function

Function that returns a loading indicator.

WebView Component Docs.

使用 renderError 函数，您可以 return 一个视图表明存在错误，包括应用程序未连接到互联网。

Answer 3

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

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

反应本机视图渲染

React Native View Render

javascript

rendering

reactjs

react-native