先上效果圖:下拉刷新，上拉加載更多效果不好截圖啊
列表頁.png
詳情頁面.png
接口返回.png
所用到的控件:
A.FlatList 實現列表展示，上拉加載，下拉刷新效果
B.react-native-router-flux 實現點擊列表的item,跳轉到詳情頁，并傳值
C.react-native 自帶的webview展示網頁界面。
參考:上拉加載，跳轉簡單實用,webview
感謝文章的作者。
下面上代碼:
1.在index.js定義
import { AppRegistry } from 'react-native';
import MyList from "./demo/listtest";//這里根據自己的目錄導入
import React from "react";
import NewsDetails from "./reactjs/newsdetials";
import {Router, Scene} from "react-native-router-flux";
class MyRouter extends React.Component {
render() {
return <Router>
<Scene key="root">
<Scene key="list" component={MyList} title="星APP" initial={true} />
<Scene key="news" component={NewsDetails} title="詳情頁"/>
</Scene>
</Router>
}
}
AppRegistry.registerComponent('HelloRN', () => MyRouter);
//initial={true}默認顯示
2.創建listtest.js文件，展示列表
import React, {Component} from "react";
import {
ActivityIndicator,
FlatList,
RefreshControl,
StyleSheet,
Text,
TouchableNativeFeedback, TouchableOpacity,
View
} from "react-native";
import { Actions } from 'react-native-router-flux';
const REQUEST_URL = 'http://gank.io/api/data/Android/10/';
let totalPage=5;//總的頁數
let itemNo=0;//item的個數
export default class LoadMoreDemo extends Component {
constructor(props) {
super(props);
this.state = {
page:1,
isLoading: true,
//網絡請求狀態
error: false,
errorInfo: "",
dataArray: [],
showFoot:0, // 控制foot， 0：隱藏footer 1：已加載完成,沒有更多數據 2 ：顯示加載中
isRefreshing:false,//下拉控制
}
}
//網絡請求——獲取數據
fetchData() {
//這個是js的訪問網絡的方法
console.log(REQUEST_URL+this.state.page)
fetch(REQUEST_URL+this.state.page,{
method: 'GET',
})
.then((response) => response.json())
.then((responseData) => {
let data = responseData.results;//獲取json 數據并存在data數組中
let dataBlob = [];//這是創建該數組，目的放存在key值的數據，就不會報黃燈了
let i = itemNo;
data.map(function (item) {
dataBlob.push({
key: i,
desc: item.desc,
time: item.createdAt,
who:item.who
, url:item.url
})
i++;
});
itemNo = i;
let foot = 0;
if(this.state.page>=totalPage){
foot = 1;//listView底部顯示沒有更多數據了
}
this.setState({
//復制數據源
// dataArray:this.state.dataArray.concat( responseData.results),
dataArray:this.state.dataArray.concat( dataBlob),
isLoading: false,
showFoot:foot,
isRefreshing:false,
});
data = null;//重置為空
dataBlob = null;
})
.catch((error) => {
this.setState({
error: true,
errorInfo: error
})
})
.done();
}
componentDidMount() {
//請求數據
this.fetchData( );
}
shouldComponentUpdate() {
return true
}
handleRefresh = () => {
this.setState({
page:1,
isRefreshing:true,//tag,下拉刷新中，加載完全，就設置成flase
dataArray:[]
});
this.fetchData()
}
itemClick = () => {
alert("ff")
{Actions.news}
}
//加載等待頁
renderLoadingView() {
return (
<View style={styles.container}>
<ActivityIndicator
animating={true}
color='blue'
size="large"
/>
</View>
);
}
_keyExtractor = (item, index) => index;
//加載失敗view
renderErrorView() {
return (
<View style={styles.container}>
<Text>
{this.state.errorInfo}
</Text>
</View>
);
}
//返回itemView
_renderItemView({item}) {
//onPress={gotoDetails()}
const gotoDetails=()=>Actions.news({'url':item.url})//跳轉并傳值
return (
// <TouchableNativeFeedback onPress={() => {Actions.news({'url':item.url})}} >////切記不能帶（）不能寫成gotoDetails()
<TouchableNativeFeedback onPress={gotoDetails}>
<View >
<Text style={styles.title}>{item.desc}</Text>
<Text style={styles.content}>時間: {item.time}</Text>
<Text style={styles.content}>作者: {item.who}</Text>
</View>
</TouchableNativeFeedback >
);
}
renderData() {
return (
<FlatList
data={this.state.dataArray}
renderItem={this._renderItemView}
ListFooterComponent={this._renderFooter.bind(this)}
onEndReached={this._onEndReached.bind(this)}
onEndReachedThreshold={0.1}
ItemSeparatorComponent={this._separator}
keyExtractor={this._keyExtractor}
//為刷新設置顏色
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this.handleRefresh.bind(this)}//因為涉及到this.state
colors={['#ff0000', '#00ff00','#0000ff','#3ad564']}
progressBackgroundColor="#ffffff"
/>
}
/>
);
}
render() {
//第一次加載等待的view
if (this.state.isLoading && !this.state.error) {
return this.renderLoadingView();
} else if (this.state.error) {
//請求失敗view
return this.renderErrorView();
}
//加載數據
return this.renderData();
}
_separator(){
return <View style={{height:1,backgroundColor:'#999999'}}/>;
}
_renderFooter(){
if (this.state.showFoot === 1) {
return (
<View style={{height:30,alignItems:'center',justifyContent:'flex-start',}}>
<Text style={{color:'#999999',fontSize:14,marginTop:5,marginBottom:5,}}>
沒有更多數據了
</Text>
</View>
);
} else if(this.state.showFoot === 2) {
return (
<View style={styles.footer}>
<ActivityIndicator />
<Text>正在加載更多數據...</Text>
</View>
);
} else if(this.state.showFoot === 0){
return (
<View style={styles.footer}>
<Text></Text>
</View>
);
}
}
_onEndReached(){
//如果是正在加載中或沒有更多數據了，則返回
if(this.state.showFoot != 0 ){
return ;
}
//如果當前頁大于或等于總頁數，那就是到最后一頁了，返回
if((this.state.page!=1) && (this.state.page>=totalPage)){
return;
} else {
this.state.page++;
}
//底部顯示正在加載更多數據
this.setState({showFoot:2});
//獲取數據，在componentDidMount()已經請求過數據了
if (this.state.page>1)
{
this.fetchData();
}
}
}
const styles = StyleSheet.create({
container: {
padding:10,
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
title: {
marginTop:8,
marginLeft:8,
marginRight:8,
fontSize: 15,
color: '#ffa700',
},
footer:{
flexDirection:'row',
height:24,
justifyContent:'center',
alignItems:'center',
marginBottom:10,
},
content: {
marginBottom:8,
marginLeft:8,
marginRight:8,
fontSize: 14,
color: 'black',
}
});
3.webview詳情頁面
import React, {Component} from 'react';
import {
StyleSheet,
Dimensions,
View,
WebView
} from 'react-native';
//獲取設備的寬度和高度
var {
height: deviceHeight,
width: deviceWidth
} = Dimensions.get('window');
export default class NewsDetails extends Component {
//渲染
render() {
return (
<View style={styles.container}>
<WebView bounces={false}
scalesPageToFit={true}
source={{uri:this.props.url}}
style={{width:deviceWidth, height:deviceHeight}}>
</WebView>
</View>
);
}
}
//樣式定義
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
代碼不多但是在使用過程中還是遇到一些問題，后面都解決了。最后感謝分享的作者。
