ReactNative FlatList解析,详情
import React, { Component } from "react";
import {
Platform,
StyleSheet,
Text,
View,
Image,
TouchableHighlight
} from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
import { StackNavigator } from "react-navigation";
import Shows from "./Shows";
class Item extends Component {
render() {
return (
<View style={{ flexDirection: "row" }}>
<Image
source={{ uri: this.props.url }}
style={{ width: 100, height: 100 }}
/>
<Text>{this.props.title}</Text>
</View>
);
}
}
class Home1 extends Component {
constructor(props) {
super(props);
this.state = {
//数据源
dataValue: [],
//刷新进度条的状态:默认我静止状态
refreshState: RefreshState.Idle
};
}
//生命周期方法:默认加载第一次数据
componentDidMount() {
this.HeaderRefresh();
}
//下拉刷新
HeaderRefresh = () => {
//HeaderRefreshing:下拉刷新进度头
this.setState({
refreshState: RefreshState.HeaderRefreshing
});
//请求网络路劲
fetch("https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=10")
//通过箭头函数,数据解析,返回解析后的json对象
.then(response => response.json())
//接收解析后的json对象,获取有用数据,状态机中做数据刷新
.then(responseJson => {
//刷新数据
this.setState({
dataValue: responseJson.data,
refreshState: RefreshState.Idle
});
})
//请求错误情况下进行调用
.catch(error => {
this.setState({
refreshState: RefreshState.Failure
});
});
};
//上拉加载
FooterRefresh = () => {
//FooterRefreshing上拉加载进度条
this.setState({
refreshState: RefreshState.FooterRefreshing
});
//请求网络路径
fetch("https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=10")
//通过箭头函数,数据解析,返回解析后的json对象
.then(response => response.json())
//接收解析后的json对象,获取有用数据,在状态机中做数据刷新
.then(responseJson => {
//刷新数据
this.setState({
dataValue: [...this.state.dataValue, ...responseJson.data],
refreshState: RefreshState.Idle
});
})
//请求错误情况下进行调用
.catch(error => {
this.setState({
refreshState: RefreshState.Failure
});
});
};
render() {
return (
<View style={styles.container}>
<RefreshListView
style={styles.welcome}
data={this.state.dataValue}
renderItem={({ item }) => {
return (
<TouchableHighlight
//点击详情传入内容
onPress={() => {
this.props.navigation.navigate("Show", {
title: item.title,
content: item.content
});
}}
>
<Item url={item.author.avatar_url} title={item.title} />
</TouchableHighlight>
);
}}
keyExtractor={index => {
return index;
}}
//上拉,下拉,状态刷新
refreshState={this.state.refreshState}
onFooterRefresh={this.FooterRefresh}
onHeaderRefresh={this.HeaderRefresh}
/>
</View>
);
}
}
//样式
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
flex: 1
}
});
//路由
const Home1Route = StackNavigator({
List: {
screen: Home1,
navigationOptions: {
header: null
}
},
Show: { screen: Shows }
});
export default Home1Route;
显示详情
import React, { Component } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import HTML from "react-native-render-html"; //渲染html成原生内容
export default class Shows extends Component {
static navigationOptions = ({ navigation }) => ({
//获取传过来的title标题
title: navigation.getParam("title", "详情")
});
render() {
return (
<View style={styles.container}>
//滑动事件
<ScrollView>
<HTML
style={styles.welcome}
//获取要展示内容
html={this.props.navigation.getParam("content", "content")}
/>
</ScrollView>
</View>
);
}
}
//样式
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
}
});
需要导入的依赖
下载项目:
react-native init HelloWorld --version 0.55.4
yarn库:
yarn add react-navigation
三方刷新加载:
yarn add react-native-refresh-list-view
import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;
StackNavigator
import { StackNavigator } from “react-navigation”;
HTML 依赖 yarn add react-native-render-html
import HTML from “react-native-render-html”;