import React, {Component} from 'react';
import {Text, View, Image, TouchableOpacity, FlatList,} from 'react-native';
import HttpUtils from "../../utils/HttpUtils";
// 第三方组件 滑动导航
import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
import Page from "../../utils/page";
import Head from "../../utils/Head";
import commonStyles from "../../styles/common.style";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import packStyles from "../Course/pack.style";
import ArticleStyles from "./Article.style";
import Resolution from "../../utils/Resolution";
export default class App extends Component {
static navigationOptions = {
header: null, //隐藏顶部导航栏
};
constructor(props) {
super(props);
this.state = {
type: 0, // 分类
currentPage: 1, // 当前页
articleList: [],
};
this.state = {articleList:[ ]}
}
componentDidMount() {
this.Page.showPageLoading();//加载中
this.queryArticleList();
}
queryArticleList() {
HttpUtils.post(
global.constants.articlePath,
"typeId=" + this.state.type +
'&page.currentPage=' + this.state.currentPage,
(result) => {
if(result.success) {
this.setState({
articleList: result.entity.articleList
})
}else{//错误信息
}
this.Page.closePageLoading();//加载完成
}
)
}
render() {
return(
<View style={{flex:1}}>
<Head barStyle={'dark-content'} animated={true} hidden={false}
backgroundColor={'#fff'}/>
<ScrollableTabView
initialPage={0}
tabBarActiveTextColor={'#2a2a2a'}
tabBarUnderlineStyle={{backgroundColor:'#2b8bd5', height:2,}}
tabBarInactiveTextColor={'#777'}
tabBarBackgroundColor={'white'}
renderTabBar={() => <ScrollableTabBar tabStyle={{paddingLeft:0,paddingRight:0}}/>}
>
<View tabLabel='头条'>
{this.articleList()}
</View>
<Text tabLabel='娱乐'>11111</Text>
<Text tabLabel='财经'>22222</Text>
<Text tabLabel='体育'>3333</Text>
<Text tabLabel='科技'>4444</Text>
<Text tabLabel='汽车'>5555</Text>
<Text tabLabel='历史'>6666</Text>
</ScrollableTabView>
<Page onPageRef={(ref) => {
this.Page = ref
}}/>
</View>
)
}
articleList(){
return(
<FlatList
data={this.state.articleList}
renderItem={({item}) =>
<TouchableOpacity>
<View style={{flexDirection: 'row',height: 100}}>
<View style={{flex: 2,backgroundColor: 'red',padding: 10}}>
<Text style={{height:60}}>{item.title}</Text>
<View style={{flexDirection: 'row',justifyContent: 'space-between'}}>
<Text>{item.createTimeStr}</Text>
<Text>评论{item.commentNum}</Text>
</View>
</View>
<View style={{flex: 1,backgroundColor: 'blue',padding: 10}}>
<Image style={{width: '100%', height: '100%',backgroundColor: 'pink'}}></Image>
</View>
</View>
</TouchableOpacity>
}
/>
)
}
}
获取json的地址：
https://m.eduhiker.com/mobile/article/list?typeId=0¤tPage=1
image.png
global是全局变量
constants类
articlePath属性（comment点进去）
articlePath:mainPath+'/mobile/article/list',
mainPath是
const mainPath='https://m.eduhiker.com';
接下来，把这俩段绿色拼在一起
https://m.eduhiker.com/mobile/article/list
后面再加上参数的写法
"typeId=" + this.state.type +
'&page.currentPage=' + this.state.currentPage,
// 在后台的数据文档会给
type: 0, // 分类
currentPage: 1, // 当前页
就成为一开始最上面的写法了
https://m.eduhiker.com/mobile/article/list?typeId=0¤tPage=1