Как сделать WebView в реакции на родной?

Question

Я пробовал разные способы визуализации html-содержимого из ответа json для реагирования на native. Но мне не удалось выполнить эти методы

1. https://www.npmjs.com/package/react-native-render-html

2. https://www.npmjs.com/package/react-native-htmlview

Поскольку нет пакета, поддерживающего table тег html.Поэтому я подумал использовать WebView для реагирования на нативную. Но это также разочаровало меня.Нет поля для выдачи html content из ответа json в WebView.Я попробовал следующее.Но они не работают

код

<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-контента, кроме этого.Пожалуйста, я застрял с этим. Я не знаю, что делать. Это вызывает задержку в моем проекте. Так что я действительно разочарован. Пожалуйста, любая помощь будет действительно ощутимой.

Answer 1

Я решил проблему. Я использовал native-base комплект пользовательского интерфейса. Поэтому, когда я попытался отрендерить WebView в Container или Content, он не будет отрисовываться. Поэтому я удалил его с помощью 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>