王学岗ReactNative开发8——项目实战三之主页中间以及FlastList以及网络请求

第一：主页中间
这张图片是我们要实现的效果
在这里插入图片描述
home.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, ScrollView,View,TextInput,Image,StatusBar} from 'react-native';
import HomeDetail from './HomeDetail';
var Dimensions =require('Dimensions')
var {width, height} = Dimensions.get('window');
import  HomeTopView from './HomeTopView'
import  HomeMiddleView from './HomeMiddleView'
export default class Home extends Component<Props> {
    _pressButton(){
        const {navigator} = this.props;
        if (navigator) {
            //startActivity
            navigator.push({
                name:"详情页面",
                component:HomeDetail
            })
        }
    }
    render() {
        return (
            <View>
                <StatusBar
                    backgroundColor='rgba(255,96,0,1.0)'
                    barStyle="light-content"
                    />
                {this.renderNavBar()}
                <ScrollView>
                    <HomeTopView/>
                    //这里添加组件
                    <HomeMiddleView/>
                </ScrollView>


            </View>
        );
    }

    renderNavBar() {
       return (
           <View style={styles.navBarStyle}>
            <Text>
                长沙
            </Text>
               <TextInput
               placeholder="养生" style={styles.topInputStyle}></TextInput>

               <View style={{flexDirection:'row'}}>
                   <Image source={require('../../res/images/icon_homepage_message.png')}  style={styles.navRightImg}/>
                   <Image source={require('../../res/images/icon_homepage_scan.png')} style={styles.navRightImg}/>
               </View>
           </View>
       )



    }
}

const styles = StyleSheet.create({
    navBarStyle:{
        backgroundColor:'rgba(255,96,0,1.0)',
        height:60,
        flexDirection:'row',
        alignItems: 'center',
        justifyContent:'space-around',
        position:'relative',
        top:-10

    },
    navRightImg:{
        width:30,
        height:30
    },
    topInputStyle:{
        width:width*0.7,
        height:40,
        backgroundColor: 'white',
        borderRadius:16,
        paddingLeft:10
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,TextInput,Image,StatusBar,ListView} from 'react-native';
var Dimensions =require('Dimensions')
var {width, height} = Dimensions.get('window');
import  HomeMiddleCommonView from './HomeMiddleCommonView'
export default class HomeMiddleView extends Component<Props> {

    constructor(Props) {
        super(Props);
        this.state={
            rightData:[{"title":"天天特价","subTitle":"特惠不打烊",
                img1:require('../../res/images/tttj.png'),
                rightImage:require('../../res/images/tttj.png'),
                "titleColor":"orange"},
                {"title":"一元吃","subTitle":"一元吃美食",
                    img1:require('../../res/images/tttj.png')
                    ,rightImage:require('../../res/images/yyms.png'),
                    "titleColor":"red"}]

        }
    }
    render() {
        return (
            <View style={styles.containerSty}>
                {/*左边*/}
                {this.renderLeftView()}
                {/*右边*/}
                //用<View/>包裹，可以设置为竖轴
                <View>

                {this.renderRightView()}
                </View>
            </View>
        );
    }

    renderRightView() {
        var itemArr=[]
        for (var i = 0; i <this.state.rightData.length; i++) {
            var data =this.state.rightData[i];
            itemArr.push(<HomeMiddleCommonView
                title={data.title}
                subTitle={data.subTitle}
                rightIcon={data.rightImage}
                titleColor={data.titleColor}
                key={i}
            />)
        }
        return itemArr;
    }

    renderLeftView() {

        var data ={img1:require('../../res/images/mdqg.png'),img2:require('../../res/images/yyms.png')}
        return (<View style={styles.leftViewStyle}>
            <Image source={data.img1} style={styles.leftImageStyle} />
            <Image source={data.img2}  style={{ width: 44,
                height: 30,}}/>
            <Text style={{color:'gray'}}>探路者烤鱼</Text>
            <Text style={{color:'blue',fontSize:10}}>9.5</Text>
        </View>)
    }
}

const styles = StyleSheet.create({
    leftImageStyle:{
        width: 129,
        height: 42,
        marginTop: 10
    },
    leftViewStyle:{
        width:width*0.5,
        height:119,
        backgroundColor:'white',
        marginRight:1,
        //交叉轴居中
        alignItems:'center',
    },
    containerSty:{
        marginTop:10,
        flexDirection: "row",

    }
});

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text,Image, View} from 'react-native';

var Demensions = require('Dimensions');
//初始化宽高
var {width, height} = Demensions.get('window');
export default class HomeMiddleCommonView extends Component<Props> {
    static defaultProps={
        title:"",
        subTitle:"",
        rightIcon:undefined,
        titleColor:"",
    }
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.containerStyle}>
                <View>
                <Text style={[{color:this.props.titleColor},styles.titleStyle]}>{this.props.title}</Text>
                <Text style={styles.subTitltStyle}>{this.props.subTitle}</Text>
                </View>
                <Image source={this.props.rightIcon} style={{width:64,height:43}}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    containerStyle: {
        //1是分割线
        width:width*0.5-1,
        flex: 1,
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: 'white',
        flexDirection:"row",
        //分割线
        borderBottomColor:'gray',
        borderBottomWidth:0.2,
    },
    subTitltStyle:{
        color:'gray'
    }
});

第二：FlagList
ListView有缺点在这里插入图片描述

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */
import React, {Component} from 'react';
import {Platform,RefreshControl,ActivityIndicator, StyleSheet, Text,FlatList, View} from 'react-native';
const CITY_NAMES = ['北京', '上海', '广州', '深圳', '杭州', '苏州', '成都', '武汉', '郑州', '洛阳', '厦门', '青岛', '拉萨'];
export default class Find extends Component<Props> {
    constructor(props) {
        super(props);
        this.state={
            isLoading:false,
            dataArray: CITY_NAMES,
            responce:""
        }
    }

    loadData(refreshing) {
        console.log("----2----->"+refreshing);
        if (refreshing) {
            this.setState({isLoading: true})
        }
    
    //    模拟网络请求
        setTimeout(()=>{
            let dataArray = [];
            //下拉刷新
            if (refreshing) {
                for (let i = this.state.dataArray.length - 1; i >= 0; i--) {
                    dataArray.push(this.state.dataArray[i]);
                }
                //上拉加载
            }else {
                dataArray = this.state.dataArray.concat(CITY_NAMES);
            }
            this.setState({
                //网络请求完成
                dataArray:dataArray,
            })
            this.setState({
                //网络请求完成
                isLoading:false
            })

        },2000)
    }
    genIndicator(){
        return <View style={styles.indicatorContainer}>
            <ActivityIndicator
                style={styles.indicator}
                size={'large'}
                color={'red'}
                animating={true}
            />
            <Text>正在加载更多</Text>
        </View>
    }
    _renderItem(data) {
        return (<View style={styles.item}>
            <Text style={styles.text}>
                {data.item}
            </Text>
        </View>)
    }
    render() {
        return (
            <View style={styles.containerStyle}>
                <Text>{this.state.responce}</Text>
                <FlatList
                    data={this.state.dataArray}
                    //1，从data中挨个取出数据并渲染到列表中。类似于ListView的renderRow
                    //2，接收一个函数
                    //3,data要放到state里面
                    renderItem={(data) => this._renderItem(data)}
                    refreshing={this.state.isLoading}
                    //用户触动刷新
                    onRefresh={()=>{
                        console.log("---1------>"+this.state.isLoading);
                        this.loadData(true);
                    }}
                    //下拉刷新，返回<RefreshControl/>控件
                    refreshControl={
                        <RefreshControl
                            title={'loading'}
                            color={['red']}
                            tintColor={'orange'}
                            titleColor={'red'}
                            //往下拉的时候产生回调函数，回调到该函数里
                        />
                    }
                    //上拉加载更多
                    ListFooterComponent={()=>this.genIndicator()}
                    //一旦到达底部，就刷新
                    onEndReached={()=>{
                        //可以不传值
                        this.loadData()
                    }}
                />


            </View>
        );
    }
}

const styles = StyleSheet.create({
    text:{
        color: 'white',
        fontSize: 20,
    },
    item: {
        backgroundColor: '#169',
        height: 200,
        marginBottom: 15,
        alignItems: 'center',
        justifyContent: 'center'
    },
    containerStyle: {
      flex:1
    },
});

第三：网络请求

  fetch( `http://192.168.1.109:8090/weixinapp/studentinfo/reactlist`)
  //1,then里面传递的是一个接口
  //2，第一个then返回的是responce.json()，并将responce.json()作为参数返回给第二个then。
  //3.then的参数是我们得到的针对本次请求的对象
  //4,在RN里面json字符串就是一个对象
  //5,拿到response之后呢就可以解析数据
            .then((responce)=>responce.json()).then(responceJson=>{
            this.setState({
                responce:responceJson[0].mainTitle
            })
        }).done()

上面的代码与android中的这个代码比较类似

okHttpClient.newCall(request).enqueue(new Callback() {
    @Override
    public void onFailure(Call call, IOException e) {
       
    }

    @Override
    public void onResponse(Call call, Response response) throws IOException {
        
    }
});

fetch(url)相当于okHttpClient.newCall(request).enqueue(new Callback() ；
onResponse相当于then；

fetch是全局变量，不需要任何引用

王学岗ReactNative开发8——项目实战三之主页中间以及FlastList以及网络请求

猜你喜欢