React Native:如何使用 Webview

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 在WebView上添加带有flex: 1的道具

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>
  );
 }
}