如何在 React Native 中做 WebView？答案

【问题标题】：How to do WebView in react native?如何在 React Native 中做 WebView？
【发布时间】：2019-05-14 06:49:25
【问题描述】：

我尝试了不同的方法来渲染 json 响应中的 html 内容以响应本机。但是我在这些方法中失败了

因为没有包支持html 的table 标签。所以我想在原生反应中使用 WebView。但这也让我失望了。 WebView 中的 json 响应中没有提供 html content 的字段。我试过以下。但是这些都不起作用

代码

<WebView
        source={{uri: `<h1>Hello World</h1>`}}
        style={{marginTop: 20}}
      />

在我的情况下，我正在获取服务器响应。我已经仔细检查了响应是否到来，来自服务器的响应很好。

  return (
      <Container style={styles.container}>
      <View>
      {this.state.section.map(article =>
      <View>

      <WebView
        source={{uri:article.data.description}}
        style={{marginTop: 20}}
      />
      </View>

)}
        </View>

      </Container>
    );

除了这些之外，还有其他方法可以呈现 html 内容吗？请让我坚持下去。我不知道该怎么办。这会导致我的项目延迟。所以我真的很失望。请任何帮助都会非常感激。

【问题讨论】：

请给WebView添加一些高度和宽度，然后看看它是否出现？我很难知道只有在您为其提供高度和宽度时才会呈现 WebView。此外，react-native-render-html 非常好，但它落后了很多地方。尝试根据您的需要对其进行自定义，这真的很容易，人们写得很好。
是的，我试过给<WebView source={{html:article.data.description}} style={{flex: 1, height:200, width:200}} />。但我仍然得到一个空白页。但是react-native-render-html 不支持table 标签。

标签： reactjs react-native webview jsx html-rendering

【解决方案1】：

我已经解决了这个问题。我使用的是native-base ui kit。所以当我尝试在Container 或Content 中渲染WebView 时，它不会渲染。所以我用View 将其删除组件但ScrollView 不起作用。所以我对Container 进行了一些更改，它工作完美。但仍然存在html table 的边框不显示的问题。但除此之外它是完美的

这是我的工作代码

<Content contentContainerStyle={{ flex: 1 ,padding:15}}>
   {this.state.section.map(article =>
      <WebView
      source={{ html: article.data.description}}
      javaScriptEnabled={true}
      style={{backgroundColor: 'transparent'}}
       />
       )}
    </Content>

【讨论】：