json

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&currentPage=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&currentPage=1
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容