ReactNavtive頂部導航欄+網路解析跳轉詳情(二)
四：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 ; }; const Share = () => { return ; }; const Ask = () => { return ; }; const Job = () => { return ; }; 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”)} ); }} 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} /> ); } }