RN 加载到html

最新推荐文章于 2024-02-01 15:29:08 发布

p_find

最新推荐文章于 2024-02-01 15:29:08 发布

阅读量995

点赞数

CC 4.0 BY-SA版权

文章标签： RN

本文链接：https://blog.youkuaiyun.com/p_find/article/details/82709043

这是一个React Native（RN）组件，用于加载并显示HTML内容以及评论列表。组件首先从网络获取数据，然后利用`react-native-render-html`库渲染HTML内容。同时，它展示了一组评论，并提供了加载更多评论的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component } from “react”;
import {
ScrollView,
StyleSheet,
Dimensions,
ActivityIndicator,
View,
Text
} from “react-native”;
import { getData } from “…/comm/Fetch”;
import ReplyItem from “./ReplyItem”;
import ReplyTextarea from “./ReplyTextarea”;
import HTML from “react-native-render-html”;

export default class Xiangqing extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam(“title”)
};
};

constructor(props) {
super(props);
this.state = {
loaded: false,
replies: [],
content: “” //初始化为空
};
}

requestData = async () => {
try {
let url = “/topic/” + this.props.navigation.getParam(“id”);
let data = await getData(url); //网络获取的
data = data.data; //网络里面的data属性
this.setState({
content: data.content,
replies: data.replies,
loaded: true
});
} catch (err) {
console.error(err);
}
};

componentDidMount() {
this.requestData();
}

render() {
return (

{this.state.loaded ? (

<HTML
html={this.state.content}
imagesMaxWidth={Dimensions.get(“window”).width - 20} //减去二十是因为padding边框是10
/>

{this.state.replies.length}
条评论

{this.state.replies.map(item => (

))}

) : (

)}

);
}
}

const style = StyleSheet.create({
box: {
flex: 1
},
replyTitle: {
backgroundColor: “#FFF”,
color: “#666”,
padding: 10,
fontSize: 16,
marginTop: 10
},
padding10: {
padding: 10
}
});