Блог

Главная - Вопросы по программированию - React native не может отображать html

React native не может отображать html

#react-native

Вопрос:

Я пытаюсь отобразить html из своего массива. Ничего не отображается, только пустое пространство — Как я могу отобразить HTML в своем компоненте?

 import React from "react";
import {
     View,
     Text,
     TouchableOpacity,
     StyleSheet,
     useWindowDimensions,
} from "react-native";

import HTML from "react-native-render-html";


const BannerWidget = () => {
     const contentWidth = useWindowDimensions().width;
 
     const testArray = [
          {
               productType: "Package",
               status: "Included",
               productName: "Advanced",
               IsFreeProductRedeemed: false,
               PackageItems: ["xxx", "ccc"],
               freeText: "<p>sample <strong> FREE </strong> </p>",
          },
     ];
     
     return (
          <View style={styles.container}>
               <HTML
                    souce={{ html: testArray[0].freeText }}
                    contentWidth={contentWidth}
               />
          </View>
     );
};

const styles = StyleSheet.create({
     container: {
          flex: 1,
          padding: 10,
          color: "black",
     },
});

export default BannerWidget;

Ответ №1:

Документы React Native в настоящее время рекомендуют React Native WebView. Это выглядело бы примерно так, как показано ниже.

 <WebView
    originWhitelist={['*']}
    source={{ html: '<p>Here I am</p>' }}
/>

Просто добавьте модуль npm в свой проект. Импортируйте веб-представление и добавьте свой html-код, как показано выше.

Метки: