问React本机不能呈现html
EN

Stack Overflow用户

提问于 2021-03-17 11:09:53

回答 1查看 72关注 0票数 0

我正在尝试从数组中呈现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;

react-native

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-17 11:30:37

React本机文档目前推荐使用反应本地WebView。它看起来会像下面这样。

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

只需将npm模块添加到项目中即可。导入WebView并添加您的html，如上面所示。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66671881

复制

相似问题

问React本机不能呈现html
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React本机不能呈现htmlEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React本机不能呈现html
EN