我创建了一个使用 woo-commerce 作为后端的应用程序,问题是我从后端收到的产品的许多属性都在 html 中,当我尝试在其中呈现它时,将所有内容都视为文本结果整个字符串和所有 html 标签一起打印到屏幕上,这不是想要的结果。
Is there any trick except for the Web-View to solve this problem?
最佳答案
对我来说,渲染 HTML 代码的最佳方法是使用一个名为“react-native-htmlview”的库。
这是一个简单的例子:
import React, {Component} from 'react';
import {
View,
StyleSheet,
} from 'react-native';
import HTMLView from 'react-native-htmlview';
class App extends Component {
state = {
html: '<p>Some Dummy <b>HTML</b> code</p>'
}
render() {
return (
<View style={styles.container}>
<HTMLView
value={this.state.html}
stylesheet={htmlStyleSheet}
/>
</View>
);
}
}
const htmlStyleSheet = StyleSheet.create({
p: {
color: 'red'
},
b: {
color: 'black'
}
})
const styles = StyleSheet.create({
container: {
paddingTop: 20,
}
})
export default App;
了解更多信息:
https://github.com/archriss/react-native-render-html
另一种选择是将 WebView 与 source 属性一起使用:
https://facebook.github.io/react-native/docs/webview
import React, { Component } from 'react';
import { WebView } from 'react-native';
class MyInlineWeb extends Component {
render() {
return (
<WebView
originWhitelist={['*']}
source={{ html: '<h1>Hello world</h1>' }}
/>
);
}
}
关于javascript - 我想从后端渲染动态内容,该内容在 React Native 中具有 html 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52484868/