React Native View Render

问题

how can I render views conditionally? Example: if my app has not connected to internet - render error view, if connected - render WebView? Does that possible with react native? I want to render not pure html

回答1:

Logic to render views conditionally, using your example:

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

回答2:

In your render method , you can define conditionals like the example below. For instance, you may check your connection at componentDidMount method and then set your props.

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

回答3:

If it's specific to the WebView, this component contains two render functions.

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.

With renderError function you can return a view indicated there's an error including the app is not connected to the internet.

来源：https://stackoverflow.com/questions/36084447/react-native-view-render