Question

我一直在测试WebView组件，但我似乎无法将其渲染出来。

此处示例：https://snack.expo.io/r1oje4C3-

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url. You get a new url each time you save.
        </Text>
        <WebView source={{html: '<p>Here I am</p>'}} />        
        <WebView source={{ uri: 'http://www.google.com'}} />
      </View>
    );
  }
}

在Expo中运行上述示例时，两个WebView组件都不会呈现。我做错了什么？

Answer 1

您似乎需要提供宽度样式参数，如下所示：

<WebView
    source={{uri: 'https://github.com/facebook/react-native'}}
    style={{width: 300}}
/>

请注意，您可能还必须提供高度样式参数。您还可以在样式中添加flex: 1。

Answer 2

在style

上添加flex: 1道具WebView

export default class App extends Component {
  render() {
   return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone!
        Save to get a shareable url. You get a new url each time you save.
      </Text>
      <WebView style={{flex: 1}} source={{html: '<p>Here I am</p>'}} />        
      <WebView style={{flex: 1}} source={{ uri: 'http://www.google.com'}} />
    </View>
  );
 }
}

React Native：如何使用Webview？

2 个答案: