四：StackNav.js顶部栏
import React, { Component } from "react";
import { createStackNavigator } from "react-navigation";
import TopTabNav from "./TopTabNav";
import Detail from "./Detail";
const StackNav = createStackNavigator({
TopTabNav: {
screen: TopTabNav,
navigationOptions: {
//去掉顶部导航的标题栏
header: null
}
},
Detail: Detail
});
export default StackNav;
五：顶部导航栏TopTabNav.js
import React, { Component } from "react";
import { createTabNavigator } from "react-navigation";
import List from "./List";
const Good = () => {
return <List tab="good" />;
};
const Share = () => {
return <List tab="share" />;
};
const Ask = () => {
return <List tab="ask" />;
};
const Job = () => {
return <List tab="job" />;
};
const TopTabNav = createTabNavigator({
Good: {
screen: Good,
navigationOptions: {
title: "精华"
}
},
Share: {
screen: Share,
navigationOptions: {
title: "分享"
}
},
Ask: {
screen: Ask,
navigationOptions: {
title: "问答"
}
},
Job: {
screen: Job,
navigationOptions: {
title: "工作"
}
}
});
export default TopTabNav;
六：List.js列表栏
import React, { Component } from "react";
import { FlatList, Text, Image, View, TouchableOpacity } from "react-native";
import { withNavigation } from "react-navigation";
import { getData } from "./fetchData";
import timeago from "timeago.js";
class List extends Component {
constructor(props) {
super(props);
this.state = {
refreshed: false, //默认不显示刷新图标
page: 1, //请求第几页
tab: this.props.tab, //类别
limit: 10, // 每页请求的数据量
data: [] //后台获取的数据
};
}
componentDidMount() {
this.requestFirstPage();
}
requestData = async () => {
let res = await getData("/topics", {
page: this.state.page,
tab: this.state.tab,
limit: this.state.limit
});
return res;
};
requestFirstPage = () => {
//重置为第一页之后，再请求数据
this.setState(
{
page: 1,
refreshed: true
},
async () => {
let res = await this.requestData();
this.setState({
data: res.data,
refreshed: false
});
}
);
};
requestNextPage = () => {
//请求下一页,page+1
this.setState(
{
page: this.state.page + 1
},
async () => {
let res = await this.requestData();
//合并以前的数据
this.setState({
data: [...this.state.data, ...res.data]
});
}
);
};
render() {
//实例化timeago
var timeagoInstance = timeago();
return (
<FlatList
data={this.state.data}
renderItem={({ item }) => {
return (
<TouchableOpacity
onPress={() => {
this.props.navigation.navigate("Detail", {
item: JSON.stringify(item)
});
}}
>
<View
style={{
flexDirection: "row",
padding: 20,
borderBottomWidth: 1,
borderColor: "#ddd",
alignItems: "center"
}}
>
<Image
source={{ uri: item.author.avatar_url }}
style={{
width: 32,
height: 32,
borderRadius: 16,
marginRight: 20,
flex: 1
}}
/>
<Text style={{ flex: 9 }}>
{item.title}/{timeagoInstance.format(item.create_at, "zh_CN")}
</Text>
</View>
</TouchableOpacity>
);
}}
keyExtractor={(item, index) => index.toString()}
refreshing={this.state.refreshed}
onRefresh={this.requestFirstPage}
onEndReached={this.requestNextPage}
onEndReachedThreshold={0.0001}
/>
);
}
}
export default withNavigation(List);
七：详情页Detail.js
import React, { Component } from "react";
import { ScrollView, Dimensions } from "react-native";
import HTML from "react-native-render-html";
export default class Detail extends Component {
//配置标题
static navigationOptions = ({ navigation }) => {
let item = JSON.parse(navigation.getParam("item"));
return {
title: item.title
};
};
constructor(props) {
super(props);
this.state = {
//获取路由传递过来的数据
item: JSON.parse(this.props.navigation.getParam("item"))
};
}
render() {
return (
<ScrollView style={{ flex: 1, padding: 10 }}>
<HTML
html={this.state.item.content}
imagesMaxWidth={Dimensions.get("window").width}
/>
</ScrollView>
);
}
}
网友评论