React-native 三方框架實現上拉重新整理、下拉載入網路請求以及跳轉先詳情頁面
首先 第一步 需要匯入三方的類庫 和跳轉詳情頁面 yarn add react-native-refresh-list-view //導包 import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;
import React, { Component } from “react”; import { StyleSheet, Text, View, Image, TouchableHighlight } from “react-native”; import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;
class Good extends Component { constructor(props) { super(props);
/**
*page： 當前頁面值
refreshState： 重新整理狀態
dataValue： 資料來源
*/
this.state = {
page: 1,
refreshState: RefreshState.Idle,
dataValue: []
};
}
/**
- 生命週期方法，建立的時候呼叫下拉重新整理，載入資料 */ componentDidMount() { this.onHeaderRefresh(); }
//下拉重新整理 onHeaderRefresh = () => { //設定為正在下拉重新整理的狀態 this.setState({ page: 1, refreshState: RefreshState.HeaderRefreshing });
fetch(`https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=10`) .then(response => response.json()) .then(responseJson => { this.setState({ //顯示獲取到的資料 dataValue: responseJson.data, refreshState: RefreshState.Idle, page: this.state.page + 1 }); }) .catch(error => { this.setState({ refreshState: RefreshState.Failure }); });
}; //上拉載入 onFooterRefresh = () => { //設定為正在上拉載入的狀態 this.setState({ refreshState: RefreshState.FooterRefreshing });
fetch(
`https://cnodejs.org/api/v1/topics?page=${
this.state.page
}&tab=good&limit=10`
)
.then(response => response.json())
.then(responseJson => {
this.setState({
//將載入到的資料與原資料進行拼接
dataValue: [...this.state.dataValue, ...responseJson.data],
refreshState: RefreshState.Idle,
page: this.state.page + 1
});
})
.catch(error => {
this.setState({
refreshState: RefreshState.Failure
});
});
};
render() {
return (
{/* //重新整理控制元件的使用 */}
<RefreshListView
style={{ flex: 1 }}
data={this.state.dataValue}
keyExtractor={(item, index) => index}
renderItem={({ item }) => (
<TouchableHighlight
onPress={() => {
this.props.navigation.navigate(“Details”, {
content: item.content
});
}}
>
<View style={{ flexDirection: “row”, margin: 5 }}>
<Image
source={{ uri: item.author.avatar_url }}
style={{ width: 80, height: 80, borderRadius: 65 }}
/>
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: “center”, alignItems: “center”, backgroundColor: “#F5FCFF” }, welcome: { fontSize: 20, textAlign: “center”, margin: 10 } });
export default Good;
跳轉詳情頁面 ：
import React, { Component } from “react”; import { StyleSheet, ScrollView, View, WebView } from “react-native”; import HTML from “react-native-render-html”; import { withNavigation } from “react-navigation”;
class Details extends Component { render() { return ( <HTML style={styles.welcome} html={this.props.navigation.getParam(“content”, “content”)} /> ); } }
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: “center”, alignItems: “center”, backgroundColor: “#F5FCFF” }, welcome: { fontSize: 20, textAlign: “center”, margin: 10, flex: 1 } }); export default withNavigation(Details);