react native 原生js整合复杂数据结构

最新推荐文章于 2023-12-04 17:34:11 发布
最新推荐文章于 2023-12-04 17:34:11 发布
阅读量462 收藏
点赞数
分类专栏： React Native React编写原生应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingrome2017/article/details/88085742
版权

React Native 版本执行0.57的规则

第一版设计需求是点击个人总览信息跳入订单详情页面，比较好处理，首先得到用户总览信息，通过制定参数得到订单列表数据，数据结构如下图

在这里插入图片描述

第二版设计需求是，总览信息与订单列表一块显示，就需要整合数据结构，将两者整合到一块便于页面渲染

在这里插入图片描述


import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList, Image, Modal, TouchableOpacity, StatusBar } from 'react-native';
import Nav from '../../components/Nav';
import { CachedImage } from "react-native-img-cache";
import Fetch from '../../network/Fetch'
import Loading from '../../components/Loading'; // 加载层
import { requestUrl } from '../../network/Url';// 请求url
import LoadingMore from '../../components/LoadingMore';

export default class AllProfit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            source: "", //TAB来源
            checkYear: 0, //保存入参年份
            infoData: [], //保存用户信息
            saveInfoData: [], //保存商品列表
            dataFlag: true,// 是否还有下一页
            isRefresh: false,// 加载图标
        }
    }
    componentDidMount() {
        let newDate = new Date();
        let year = newDate.getFullYear();
        this.setState({
            checkYear: year
        })
        this._waitProfit(year)
    }
    componentWillMount() {
        if (this.props.navigation.state.params) {
            this.setState({
                source: this.props.navigation.state.params.source
            })
        }
    }
    render() {
        const { goBack } = this.props.navigation;
        return (
            <View style={styles.container}>
                <StatusBar
                    animated={true}//是否动画
                    hidden={false}//是否隐藏
                    backgroundColor={'#000'}//android 设置状态栏背景颜色
                    translucent={false}//android 设置状态栏是否为透明
                    showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slide
                    networkActivityIndicatorVisible={this.state.isLoading}//IOS设定网络活动指示器(就是那个菊花)是否显示在状态栏。
                    statusBarStyle={"default"}//状态栏样式 default	默认（IOS为白底黑字、Android为黑底白字）
                    barStyle={"default"}// 状态栏文本的颜色。
                />
                <Nav title={this.state.source == "All" ? "总收益详情" : "待收益详情"} leftClick={() => { goBack() }} />
                {/* 收益列表 */}
                <FlatList
                    style={styles.FlatListStyle}// 样式
                    data={this.state.saveInfoData}// 数据源
                    initialNumToRenƒder={10}// 
                    keyExtractor={(item, index) => index.toString()}
                    ListFooterComponent={() => {
                        return (
                            <LoadingMore dataFlag={this.state.dataFlag} dataLength={this.state.saveInfoData.length} />
                        )
                    }}// 尾部组件
                    renderItem={({ item }) => this.renderItem(item)}// 渲染
                    onRefresh={() => {
                        this.setState({
                            saveInfoData: [],
                            onEndReached: false,
                        })
                        let newDate = new Date();
                        let year = newDate.getFullYear();
                        this._waitProfit(year)
                    }}//头部刷新组件
                    refreshing={this.state.isLoading}//加载图标
                    onEndReached={() => this.onEndReached()} // 加载更多
                    onEndReachedThreshold={0.1}// 加载更多触发时机
                    ListEmptyComponent={() => {
                        // 无数据时显示的内容
                        return (
                            !this.state.dataFlag && this.state.saveInfoData.length <= 0 ?
                                <View style={styles.profitList}>
                                    <Text style={{ textAlign: "center" }}>暂无收益信息</Text>
                                </View>
                                : null
                        )
                    }}
                />
                {/* 加载loading */}
                {this.state.isLoading ? <Loading /> : null}
            </View>
        );
    }
    //列表
    renderItem = (item) => {
        return (
            <View>
                <View style={{ backgroundColor: Colors.mainBg }}>
                    <Text style={styles.monthTxt}>{item.year}年{item.month}月{this.state.source == "All" ? "共￥" + (item.sumPrice / 100).toFixed(2) : null}</Text>
                </View>
                <View style={styles.info}>
                    <CachedImage style={styles.personInfoImg} source={item.head_url ? { uri: item.head_url } : require('../../images/logo.jpeg')} />
                    <View style={styles.infoTop}>
                        <View>
                            <Text style={styles.infoTopTxt}>{item.nick_name}</Text>
                            {/* <Text style={styles.dateTxt}>购买时间:{item.create_time}</Text> */}
                        </View>
                        <Text style={styles.infoTopPrice}>共：{(item.sumPrice / 100).toFixed(2)}</Text>
                    </View>
                </View>
                {
                    item.goodsMap && item.goodsMap.map((items, ind) => {
                        return (
                            <View style={[styles.profitList]} key={ind}>
                                {
                                    items.detail.map((i, indexs) => {
                                        return (
                                            <View style={styles.infoBox} key={indexs}>
                                                <CachedImage style={{ width: Px2dp(70), height: Px2dp(70) }} source={{ uri: i.list_image }} />
                                                <View>
                                                    <Text numberOfLines={2} style={styles.infoBoxTxt}>{i.goods_name}</Text>
                                                    <Text style={styles.infoBoxTxtSx}>规格：{i.shuxin}</Text>
                                                </View>
                                                <View>
                                                    <Text style={styles.infoBoxPrice}>￥{(i.price / 100).toFixed(2)}</Text>
                                                    <Text style={styles.infoBoxMoney}>+￥{(i.earn / 100).toFixed(2)}</Text>
                                                </View>
                                            </View>
                                        )
                                    })
                                }
                            </View>
                        )
                    })

                }
            </View>
        )
    }
    onEndReached() {
        if (this.state.dataFlag) {
            let year = this.state.checkYear * 1 - 1;
            this._waitProfit(year)
        }
    }
    //待收益表头
    _waitProfit(checkVal) {
        if (checkVal == 2016) {
            this.setState({
                dataFlag: false
            })
            return true
        }
        console.log(checkVal)
        Fetch(requestUrl, {
            "userId": id,
            "role": "person",
            "param": String(checkVal),
        }).then(data => {
            console.log(data)
            if (data.status == "SUCCESS") {
                if (data.data.length > 0) {
                    for (let i = 0; i < data.data.length; i++) {
                        this._profitList(data.data[i].year, data.data[i].month)
                    }
                    this.setState({
                        isLoading: false,
                        infoData: data.data,
                        dataFlag: true
                    })
                }
                else {
                    this.setState({
                        dataFlag: false
                    })
                }
            } else if (data.status == "ERROR") {
                this.setState({
                    isLoading: false,
                })
                ToastShow({ "text": '获取待收益数据接口失败' })
            } else {
                this.setState({
                    isLoading: false,
                })
            }
        })
    }
    //待收益商品列表
    _profitList(year, month) {
        Fetch(requestUrl, {
            "userId": id,
            "year": year,
            "role": "person",
            "month": month
        }).then(data => {
            console.log(data)
            if (data.status == "SUCCESS") {
                let tempArr = this.state.infoData;
                for (let i = 0; i < tempArr.length; i++) {
                    if (year == tempArr[i].year && month == tempArr[i].month) {
                        tempArr[i]["goodsMap"] = data.data;
                        this.setState({
                            saveInfoData: tempArr,
                        })
                    }
                }
            } else if (data.status == "ERROR") {
                this.setState({
                    isLoading: false,
                })
                ToastShow({ "text": '获取个人收益订单列表接口失败' })
            } else {
                this.setState({
                    isLoading: false,
                })
            }
        })
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.mainBg,
    },
    //收益列表
    FlatListStyle: {
        flex: 1,
        backgroundColor: "#fff",
    },
    monthTxt: {
        fontSize: Px2dp(14),
        color: Colors.text666,
        lineHeight: Px2dp(20),
        marginBottom: Px2dp(8),
        marginTop: Px2dp(16),
        paddingLeft: Px2dp(16)
    },
    profitList: {
        paddingLeft: Px2dp(16),
        paddingRight: Px2dp(16),
    },
    info: {
        flexDirection: "row",
        paddingLeft: Px2dp(16),
        paddingRight: Px2dp(16),
        paddingTop: Px2dp(16)
    },
    personInfoImg: {
        width: Px2dp(44),
        height: Px2dp(44),
        backgroundColor: Colors.white,
        borderRadius: Px2dp(22),
        marginRight: Px2dp(10)
    },
    infoTop: {
        flexDirection: "row",
        flex: 1,
        justifyContent: "space-between",
        borderBottomWidth: Pixel,
        borderBottomColor: "#ececec"
    },
    infoTopTxt: {
        fontSize: Px2dp(15),
        color: Colors.text333,
    },
    infoTopPrice: {
        fontSize: Px2dp(16),
        color: Colors.red,
        textAlign: "right"
    },
    dateTxt: {
        fontSize: Px2dp(12),
        color: Colors.text999,
        marginTop: Px2dp(4),
        lineHeight: Px2dp(17)
    },
    infoBox: {
        flexDirection: "row",
        justifyContent: 'space-between',
        marginTop: Px2dp(10),
        marginBottom: Px2dp(10)
    },
    infoBoxTxt: {
        fontSize: Px2dp(14),
        color: Colors.text333,
        lineHeight: Px2dp(20),
        width: Px2dp(180),
        marginBottom: Px2dp(10)
    },
    infoBoxPrice: {
        fontSize: Px2dp(13),
        color: Colors.text666,
        lineHeight: Px2dp(18),
        textAlign: "right"
    },
    infoBoxMoney: {
        fontSize: Px2dp(15),
        color: Colors.red,
        lineHeight: Px2dp(21),
        marginTop: Px2dp(31),
        textAlign: "right"
    },
    infoBoxTxtSx: {
        fontSize: Px2dp(12),
        color: Colors.text666,
        lineHeight: Px2dp(17)
    },
    // 选择年份
    maskClick: {
        flex: 1,
        backgroundColor: Colors.maskColor,
        justifyContent: 'flex-end',
    },
    OptionBoxTit: {
        fontSize: Px2dp(15),
        color: Colors.text333,
        marginTop: Px2dp(24),
        textAlign: "center",
        marginBottom: Px2dp(16)
    },
    OptionBoxs: {
        flexDirection: "row",
        alignItems: "center",
        borderColor: '#ececec',
        borderBottomWidth: Pixel,
        height: Px2dp(40)
    },
    OptionBox: {
        justifyContent: "center",
        paddingLeft: Px2dp(16),
        paddingRight: Px2dp(16),
        paddingBottom: TabBar,
        position: "relative",
        backgroundColor: Colors.white,
    },
    OptionBoxTxt: {
        fontSize: Px2dp(15),
        color: Colors.text333,
        flex: 1,
    },
    closeImg: {
        position: "absolute",
        top: Px2dp(16),
        right: Px2dp(6),
        padding: Px2dp(10),
        justifyContent: "center",
        alignItems: "center"
    },
});

新版总收益与待收益页面，加入分页功能，因为无法统计一页返回多少条数据，每一页代表一个月份，返回的是一个对象，所有就的把返回的数据整合到一个数组里面。

import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList, Image, Modal, TouchableOpacity, StatusBar } from 'react-native';
import Nav from '../../components/Nav';
import { CachedImage } from "react-native-img-cache";
import Fetch from '../../network/Fetch'
import Loading from '../../components/Loading'; // 加载层
import { requestUrl } from '../../network/Url';// 请求url
import LoadingMore from '../../components/LoadingMore';
import NoNetwork from '../../components/NoNetwork';
import * as Public from '../../utils/Public';
import StatusBarModule from '../../components/StatusBarModule';

export default class AllProfit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            source: "", //TAB来源
            infoData: {}, //保存用户信息
            saveInfoData: [], //保存商品列表
            dataFlag: true,// 是否还有下一页
            isRefresh: false,// 加载图标
            networkFlag: true,// 网络是否畅通
            pageNum: 1,// 页码
        }
    }
    componentDidMount() {
        this._getEarnOrder(this.state.pageNum, this.state.source == "All" ? "0" : "1")
    }
    componentWillMount() {
        if (this.props.navigation.state.params) {
            this.setState({
                source: this.props.navigation.state.params.source
            })
        }
    }
    render() {
        const { goBack } = this.props.navigation;
        return (
            <View style={styles.container}>
                <StatusBarModule isLoading={this.state.isLoading} />
                <Nav title={this.state.source == "All" ? "总收益详情" : "待收益详情"} leftClick={() => { goBack() }} />

                {/* 收益列表 */}
                {
                    this.state.networkFlag ?
                        <FlatList
                            style={styles.FlatListStyle}// 样式
                            data={this.state.saveInfoData}// 数据源
                            initialNumToRenƒder={10}// 
                            keyExtractor={(item, index) => index.toString()}
                            ListFooterComponent={() => {
                                return (
                                    <LoadingMore dataFlag={this.state.dataFlag} dataLength={this.state.saveInfoData.length} />
                                )
                            }}// 尾部组件
                            renderItem={({ item }) => this.renderItem(item)}// 渲染
                            onRefresh={() => {
                                this.setState({
                                    saveInfoData: [],
                                    pageNum: 1,
                                    onEndReached: false,
                                })
                                this._getEarnOrder(1, this.state.source == "All" ? "0" : "1");
                            }}//头部刷新组件
                            refreshing={this.state.isLoading}//加载图标
                            onEndReached={() => this.onEndReached()} // 加载更多
                            onEndReachedThreshold={0.1}// 加载更多触发时机
                            ListEmptyComponent={() => {
                                // 无数据时显示的内容
                                return (
                                    !this.state.dataFlag && this.state.saveInfoData.length <= 0 ?
                                        <View style={styles.noprofitList}>
                                            <Image source={require('../../images/AllProfit.png')} />
                                            <Text style={{ fontSize: Px2dp(13), color: Colors.text888, marginTop: Px2dp(18) }}>暂无收益信息</Text>
                                        </View>
                                        : null
                                )
                            }}
                        />
                        : <NoNetwork click={() => {
                            this.setState({
                                networkFlag: true,
                            })
                            this._getEarnOrder(this.state.pageNum, this.state.source == "All" ? "0" : "1")
                        }} />
                }
                {/* 加载loading */}
                {this.state.isLoading ? <Loading /> : null}
            </View>
        );
    }
    //列表
    renderItem = (item) => {
        return (
            <View style={{ backgroundColor: Colors.mainBg }}>
                <View style={{ backgroundColor: Colors.mainBg }}>
                    <Text style={styles.monthTxt}>{item.year}年{item.month}月{this.state.source == "All" ? "共¥" + (item.sumEarn / 100).toFixed(2) : null}</Text>
                </View>
                {
                    item.orderList.map((info, index) => {
                        return (
                            <View key={index} style={{ marginBottom: item.orderList.length - 1 != index ? Px2dp(20) : 0, backgroundColor: "#fff" }}>
                                <View style={styles.info}>
                                    <CachedImage style={styles.personInfoImg} source={info.userIamge ? { uri: info.userIamge } : require('../../images/logo.jpeg')} />
                                    <View style={styles.infoTop}>
                                        <View>
                                            <Text style={styles.infoTopTxt}>{info.userName}</Text>
                                            <Text style={styles.dateTxt}>购买时间:{Public.TimeFormatting(info.buyTime)}</Text>
                                        </View>
                                        <Text style={styles.infoTopPrice}>共：{info.orderEarn / 100}</Text>
                                    </View>
                                </View>
                                <View style={{ paddingLeft: Px2dp(16), paddingRight: Px2dp(16) }}>
                                    {
                                        info.goodsList && info.goodsList.map((i, indexs) => {
                                            return (
                                                <View style={styles.infoBox} key={indexs}>
                                                    <CachedImage style={{ width: Px2dp(70), height: Px2dp(70) }} source={{ uri: i.goodsImage }} />
                                                    <View>
                                                        <Text numberOfLines={2} style={styles.infoBoxTxt}>{i.goodsName}</Text>
                                                        <Text style={styles.infoBoxTxtSx}>数量：{i.sum}</Text>
                                                    </View>
                                                    <View>
                                                        <Text style={styles.infoBoxPrice}><Text>¥</Text>{(i.goodsPrice / 100).toFixed(2)}</Text>
                                                        {
                                                            //没有退款的状态
                                                            i.refunded == "0" ?
                                                                <Text style={styles.infoBoxMoney}><Text>+¥</Text>{i.goodsEarn / 100}</Text>
                                                                :
                                                                <Text style={[styles.infoBoxMoney, { color: Colors.text666 }]}>已退款</Text>
                                                        }
                                                    </View>
                                                </View>
                                            )
                                        })
                                    }
                                </View>
                            </View>
                        )
                    })
                }
            </View>
        )
    }
    onEndReached() {
        if (this.state.dataFlag) {
            let pageNum = this.state.pageNum * 1 + 1;
            this.setState({
                pageNum: pageNum,
            })
            this._getEarnOrder(pageNum, this.state.source == "All" ? "0" : "1");
        }
    }
    //查看用户返佣订单信息 
    _getEarnOrder(pageNum, type) {
        Fetch(requestUrl.URL, {
            "userId": UserInfo.id,
            "page": pageNum,
            "type": type
        }).then(data => {
            console.log(data)
            if (data.status == "SUCCESS") {
                let tempArr = this.state.saveInfoData;
                tempArr = tempArr.concat(data.data);
                this.setState({
                    dataFlag: true,
                    saveInfoData: tempArr,
                    isLoading: false,
                })
            } else if (data.status == "ERROR") {
                this.setState({
                    isLoading: false,
                    dataFlag: false,
                })
                ToastShow({ "text": '查看用户返佣订单信息接口失败' })
            } else {
                this.setState({
                    isLoading: false,
                    dataFlag: false,
                })
            }
        })
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.mainBg,
    },
    //收益列表
    FlatListStyle: {
        flex: 1,
        backgroundColor: "#fff",
    },
    monthTxt: {
        fontSize: Px2dp(14),
        color: Colors.text666,
        lineHeight: Px2dp(20),
        marginBottom: Px2dp(8),
        marginTop: Px2dp(16),
        paddingLeft: Px2dp(16)
    },
    profitList: {
        paddingLeft: Px2dp(16),
        paddingRight: Px2dp(16)
    },
    noprofitList: {
        justifyContent: "center",
        alignItems: "center",
        paddingTop: SCREEN_HEIGHT * .25,
    },
    info: {
        flexDirection: "row",
        paddingLeft: Px2dp(16),
        paddingRight: Px2dp(16),
        paddingTop: Px2dp(16)
    },
    personInfoImg: {
        width: Px2dp(44),
        height: Px2dp(44),
        backgroundColor: Colors.white,
        borderRadius: Px2dp(22),
        marginRight: Px2dp(10)
    },
    infoTop: {
        flexDirection: "row",
        flex: 1,
        justifyContent: "space-between",
        borderBottomWidth: Pixel,
        borderBottomColor: "#ececec"
    },
    infoTopTxt: {
        fontSize: Px2dp(15),
        color: Colors.text333,
    },
    infoTopPrice: {
        fontSize: Px2dp(16),
        color: Colors.red,
        textAlign: "right"
    },
    dateTxt: {
        fontSize: Px2dp(12),
        color: Colors.text999,
        marginTop: Px2dp(4),
        lineHeight: Px2dp(17)
    },
    infoBox: {
        flexDirection: "row",
        justifyContent: 'space-between',
        marginTop: Px2dp(10),
        marginBottom: Px2dp(10)
    },
    infoBoxTxt: {
        fontSize: Px2dp(14),
        color: Colors.text333,
        lineHeight: Px2dp(20),
        width: Px2dp(180),
        marginBottom: Px2dp(10)
    },
    infoBoxPrice: {
        fontSize: Px2dp(13),
        color: Colors.text666,
        lineHeight: Px2dp(18),
        textAlign: "right"
    },
    infoBoxMoney: {
        fontSize: Px2dp(15),
        color: Colors.red,
        lineHeight: Px2dp(21),
        marginTop: Px2dp(31),
        textAlign: "right"
    },
    infoBoxTxtSx: {
        width: Px2dp(180),
        fontSize: Px2dp(12),
        color: Colors.text666,
        lineHeight: Px2dp(17)
    },
    // 选择年份
    maskClick: {
        flex: 1,
        backgroundColor: Colors.maskColor,
        justifyContent: 'flex-end',
    },
    OptionBoxTit: {
        fontSize: Px2dp(15),
        color: Colors.text333,
        marginTop: Px2dp(24),
        textAlign: "center",
        marginBottom: Px2dp(16)
    },
    OptionBoxs: {
        flexDirection: "row",
        alignItems: "center",
        borderColor: '#ececec',
        borderBottomWidth: Pixel,
        height: Px2dp(40)
    },
    OptionBox: {
        justifyContent: "center",
        paddingLeft: Px2dp(16),
        paddingRight: Px2dp(16),
        paddingBottom: TabBar,
        position: "relative",
        backgroundColor: Colors.white,
    },
    OptionBoxTxt: {
        fontSize: Px2dp(15),
        color: Colors.text333,
        flex: 1,
    },
    closeImg: {
        position: "absolute",
        top: Px2dp(16),
        right: Px2dp(6),
        padding: Px2dp(10),
        justifyContent: "center",
        alignItems: "center"
    },
});

在这里插入图片描述

关于商品详情页面规格页面怎么渲染，怎么传参数，后台会给你一个格式参数按给出的格式整合，我就遇到一个这样的问题，组合成这样的
yanse:樱粉金@banben:6G+128GB@wangluo:全网通

下面是数据结构的截图 详情参考 选项切换方法 分为有参数和无参数两种情况， 先拿到最后一位 因为最后一位没有@符号

在这里插入图片描述

{this.state.goodsDetailInfo.templateFieldList && this.state.goodsDetailInfo.templateFieldList.map((item, index) => {
                                        return (
                                            <View key={index} style={{ paddingLeft: Px2dp(16), paddingRight: Px2dp(16) }}>
                                                <Text style={styles.optionTitle}>{item.field_name}</Text>
                                                <View style={styles.optionBox}>
                                                    {item.validAttributeList.map((option, inx) => {
                                                        return (
                                                            <TouchableOpacity
                                                                key={inx}
                                                                activeOpacity={.8}
                                                                onPress={() => {
                                                                    this.changeSelected(item, option);
                                                                }}
                                                                style={[
                                                                    styles.optionClick,
                                                                    item.field_value == option.fieldValue ? { borderColor: Colors.red } : null
                                                                ]}>
                                                                <Text style={[
                                                                    styles.optionText,
                                                                    item.field_value == option.fieldValue ? { color: Colors.red } : null
                                                                ]}>{option.fieldValue}</Text>
                                                            </TouchableOpacity>
                                                        )
                                                    })}
                                                </View>
                                            </View>
                                        )
                                    })}





// 选项切换    分为有参数和无参数两种情况，  先拿到最后一位 因为最后一位没有@符号
    changeSelected(item, option) {
        console.log(item,option)
        let attributeStr = '';
        for (let i = 0; i < this.state.goodsDetailInfo.templateFieldList.length; i++) {
            if (item.field_code == this.state.goodsDetailInfo.templateFieldList[i].field_code) {
                if (i == this.state.goodsDetailInfo.templateFieldList.length - 1) {
                    attributeStr += this.state.goodsDetailInfo.templateFieldList[i].field_code + ':' + option.fieldValue
                } else {
                    attributeStr += this.state.goodsDetailInfo.templateFieldList[i].field_code + ':' + option.fieldValue + "@"
                }
            } else {
                if (i == this.state.goodsDetailInfo.templateFieldList.length - 1) {
                    attributeStr += this.state.goodsDetailInfo.templateFieldList[i].field_code + ':' + this.state.goodsDetailInfo.templateFieldList[i].field_value
                } else {
                    attributeStr += this.state.goodsDetailInfo.templateFieldList[i].field_code + ':' + this.state.goodsDetailInfo.templateFieldList[i].field_value + "@"
                }
            }
        }
        this.getProductDetailInfo(attributeStr)
    }
kingrome2009
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在react里写原生js_从零开始使用react+antd搭建项目
weixin_39908588的博客
11-19 658
之前的文章都是自己的学习日志，主要是防止自己遗忘之前遇到的坑。这次将从最基础的项目搭建开始讲起，做一个基于react和antd的后台管理系统。我会一步步进行下去，所以看完本文你哪怕不了解react，应该也会使用react做一个简单的项目。话不多少，直接开始。完整项目请前往GitHub查看，体验请点击这里。如果觉得可以请给一颗star，谢谢各位。1、开发环境：node.js -v 12.16.3cr...
[手写系列]使用原生js造一个简易的React轮子
MS6324_ZAKU的博客
12-01 354
今天就手写一个简单的React 造轮子能让我们更加深入理解React及其思想. JSX 是JavaScript语法的扩展,用于形象的描述一段DOM结构 众所周知,react使用jsx,大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法，<div />会被编译成React.createElement('div') 在 JSX 中你可以任意使用 JavaScript 表达式，只需要用一个大括号把表达式括起来。每一个 React 元素事实上都是一个 JavaScript 对象，你
在react里写原生js_React 源码学习（九）：“脱胎换骨”
weixin_39549312的博客
11-12 266
继 0.3-stable （以下简称 v0.3）后，这里开始将解读 16.8.6 （以下简称 v16.8.6）版本，此版本上标签于 2019 年 3 月 28 日。 那么接下来，我将从几个方面来解读这个版本的源码。（目录含有 v0.3 ）React 源码学习（一）：HTML 元素渲染React 源码学习（二）：HTML 子元素渲染React 源码学习（三）：CSS 样式及 DOM 属性React...
react native 原生js整理数据结构 收银付款
愿你走过半生，归来任是少年。
03-10 399
React Native 版本执行0.57的规则 import React, { Component } from 'react'; import { StyleSheet, Text, View, ScrollView, Image, TouchableOpacity, StatusBar, BackHandler } from 'react-native'; import Nav fr...
React中如何引入原生JS库
weixin_43865681的博客
07-23 7017
一、在js代码加载之前先引入需要的库 创建一个 script 标签，加入到html 的head里面,用JS代码实现 let script = document.createElement('script') script.type = 'text/javascript' script.async = true script.src = '../../../../public/static/jtopo/js/jtopo-editor.js' document.head.ap
React Native 快速搭建商城项目基础结构帖子附件代码
11-15
2. **项目结构**：一个标准的React Native项目通常包含`index.js`作为入口文件，`App.js`作为应用的主要组件，以及`package.json`文件来管理依赖。在商城项目中，还会有如`components`目录用于存放自定义组件，`...
react native 开发
04-26
- **与原生项目的整合**：可以在原生项目中使用 React Native 来实现某些功能，从而利用原生的优势。 - **用户体验**：尽量保持与原生应用一致的用户体验。 - **标准特性支持**：采用最新的 ES 版本特性。 - **调试...
bartrn:用于 iOS 的 BART 应用程序以试用 React Native
06-04
React Native 是 Facebook 推出的一个开源框架，它允许开发者使用 JavaScript 和 React 模式来构建原生的移动应用程序。通过使用 React Native，开发者可以利用一种熟悉的编程语言和工具链，同时为 iOS 平台创建高...
DjangoReactNative:带有React Native的第一个实现django
03-09
React Native，是Facebook推出的一个开源JavaScript框架，用于构建原生的移动应用程序。它使用React的声明式编程风格，允许开发者用JavaScript和React编写iOS和Android应用，同时享受React的高效渲染机制。React ...
react-native-darkmode-list:使用React Native和AWS AppSync的黑暗模式列表应用程序:black_circle:
05-09
在"react-native-darkmode-list-master"压缩包中，你将找到项目的主要源代码结构，包括`src`目录，其中包含了应用的组件、样式和逻辑。例如，`ListScreen.js`可能包含列表视图的实现，而`SettingsScreen.js`可能处理...
react usestate 更新_React Hook useState复杂数据更新机制踩坑
weixin_39929259的博客
01-30 2927
这里主要用Hook来讲述和做示范(大部分人应该已经全面拥抱Hook了吧)。class组件用setState更新state中某个复杂数据类型，理论上也是差不多的。很多时候我们某个state数据不是简单数据类型(值类型)，而是数组、对象之类(引用类型)。而React组件的更新机制对state只进行浅对比，也就是更新某个复杂类型数据时只要它的引用地址没变，那就不会重新渲染组件。因此，尤其当被更新的引用类...
react native的一些基本概念
空杯子
06-12 3850
理解react native一般做纯客户端Native开发的人，如果只是听说过react native，没有仔细了解的话，会本能的认为 react native是一个东西，是某种语言或某个开发模式。那咱们先从感性上认识react native。 react native其实react和native两部分组成的。react是什么？react是Facebook开发的一款JS库,只是web前端的一个js
react native 团队页面 思路跳坑
愿你走过半生，归来任是少年。
05-25 297
React Native 版本执行0.57的规则 后台出了一个接口，根据不同的参数获取不同的团队信息。刚开始做的时候，一个接口调了两次，因为异步的问题不能根据设想的步骤先出现一级团队，再出现二级团队，问题比较奇葩，所以定义了两个方法 。 import React, { Component } from 'react'; import { StyleSheet, Text, View, Scr...
react-native 之九宫格列表
岁月静好，善待时光。
08-17 2730
先上效果图: 就是类似这种的列表. 在 iOS 中有 UICollectionView 可以直接写这种类型的列表, 但在React-native 中直接就可以用 FlatList 完成, 也就是说这种类型的列表和普通的列表没什么区别, 只是在布局的时候要些许的差异. Let’s do it! 1.渲染一个列表 render() { return ( ...
关于react-native中FlatList的 this指向问题
halo1416的博客
08-16 1175
问题描述：在使用 FlatList 制作列表过程中，其 renderItem 属性返回的是一个 TouchableOpacity 的按钮，但是在触发其点击事件onPress时，总是报错！ FlatList代码： _renderItem渲染item的代码：   报错原因： TouchableOpacity的onPress中使用了this，但他是不存在的，应用在FlatList的...
React Native中使用redux
qq_54074936的博客
01-04 1144
React Native中使用redux基础
React-Native: redux、react-redux
最新发布
qq_37147123的博客
12-04 149
React-Native: redux、react-redux 数据状态管理
在ReactNative中使用Redux简述
兔狲超凶的博客
04-13 6166
写在前面：在ReactNative中，常常会有下面这样的需求。就是像登录一样，登陆成功，我需要做很多事情，存储用户信息、把别的页面（或上一级页面）存在的头像昵称给显示出来。有可能还需要修改离登录页有两个层级页面上的数据。基于我现在使用的ReactNative0.51.0版本和react-navigtion1.5.+版本。虽然可以修改navigtion的goBack方法来回参。但是层级一深，将变得难...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值