react native 数据局部刷新 switch渲染模版

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

React Native 版本执行0.57的规则

第一版优惠券中心，是删除已领取的状态，后来又改为全部展示，分为已领取、去使用、已使用、已过期几种状态。


import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, Image, ImageBackground, TouchableOpacity, StatusBar } from 'react-native';
import Nav from '../../components/Nav';
import { requestUrl } from '../../network/Url';// 请求url
import Fetch from '../../network/Fetch';
import Loading from '../../components/Loading'; // 加载层
import { StackActions, NavigationActions, NavigationEvents } from 'react-navigation';
import StatusBarModule from '../../components/StatusBarModule';
import { global } from '../../utils/Global';
import { CachedImage } from "react-native-img-cache";

export default class MyRedeemCode extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            list: [], //优惠券数据
            itemObj: {}, //首页传入活动ID
            wsActivityInfo: {}, //活动信息
            userCouponOfActivity: [], //已使用优惠券
            couponId: "",//优惠券ID
            limitFlag: "",
            activity: "",
            limitMsg: "", //活动标题提示
            wsActivityInfoProduct: [],//推荐商品列表
        }
    }
    componentWillMount() {
        if (this.props.navigation.state.params) {
            this.setState({
                itemObj: this.props.navigation.state.params.data
            })
        }
    }
    componentDidMount() {
        this._getWsActivityInfo() //获取活动优惠券数据
    }
    render() {
        const { navigate, goBack } = this.props.navigation;
        return (
            <View style={styles.container}>
                <StatusBarModule isLoading={this.state.isLoading} />
                <Nav title={"领券中心"} leftClick={() => { goBack() }} />
                <ScrollView>
                    {/* 领券活动公告 */}
                    {
                        this.state.limitFlag == '1' ?
                            <View style={{ justifyContent: "center", alignItems: 'center', marginTop: Px2dp(25) }}>
                                <Text style={{ fontSize: Px2dp(16), color: Colors.text666 }}>{this.state.limitMsg}</Text>
                            </View>
                            :
                            this.state.limitFlag != '1' && this.state.activity == '0' ?
                                <View style={{ justifyContent: "center", alignItems: 'center', marginTop: Px2dp(25) }}>
                                    <Text style={{ fontSize: Px2dp(16), color: Colors.text666 }}>活动还未开始，敬请期待~</Text>
                                </View>
                                : this.state.limitFlag != '1' && this.state.activity == '2' ?
                                    <View style={{ justifyContent: "center", alignItems: 'center', marginTop: Px2dp(25) }}>
                                        <Text style={{ fontSize: Px2dp(16), color: Colors.text666 }}>很遗憾该活动已结束，下次要快点哦~</Text>
                                    </View>
                                    : null
                    }
                    {/* 领券活动标题 */}
                    {
                        this.state.limitFlag != '1' && this.state.activity == '1' ?
                            <ImageBackground source={require('../../images/Bitmap.png')} style={styles.couponTitBox}>
                                <Text style={styles.couponTit}>{this.state.wsActivityInfo.subTittle}</Text>
                            </ImageBackground>
                            : null
                    }
                    {/* 领券活动列表 */}
                    {
                        this.state.limitFlag != '1' && this.state.activity == '1' &&
                            this.state.list.length > 0 ?
                            this.state.list.map((item, index) => {
                                return (
                                    <ImageBackground key={index} style={[styles.newCoupon, { marginBottom: index == this.state.list.length - 1 ? 0 : Px2dp(5) }]} source={(item.status == "2" || item.status == "1" || item.couponNum == 0) ? require('../../images/yesActiveCoupon.png') : require('../../images/noActiveCoupon.png')} >
                                        <View style={styles.newCouponLf}>
                                            <Text style={styles.newCouponLfPrice}><Text style={styles.newCouponLfPriceTag}>¥</Text>{item.price}</Text>
                                            <Text style={styles.newCouponLfTxt}>优惠券</Text>
                                        </View>
                                        <View style={styles.newCouponCenter}>
                                            <Text style={styles.newCouponCenterTit}>满{item.fulCut}元可用</Text>
                                            <Text style={styles.newCouponCenterdate}>开始时间：{this.state.wsActivityInfo.couponstartDate}</Text>
                                            <Text style={styles.newCouponCenterdate}>结束时间：{this.state.wsActivityInfo.couponendDate}</Text>
                                            <Text numberOfLines={1} style={styles.newCouponCenterdit}>详细说明：{item.remarks}</Text>
                                        </View>
                                        {
                                            //优惠券底部按钮
                                            this._couponDom(item)
                                        }
                                    </ImageBackground>
                                )
                            }) :
                            null
                    }
                    {/* 推荐列表 */}
                    {
                        this.state.wsActivityInfoProduct.length > 0 ?
                            <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center", marginBottom: Px2dp(15), marginTop: Px2dp(10) }}>
                                <Text style={{ fontSize: Px2dp(20), color: Colors.text333 }}>热门推荐</Text>
                            </View>
                            : null
                    }
                    {
                        this.state.wsActivityInfoProduct.length > 0 ?
                            <View style={styles.wsActivityInfoProduct}>
                                {
                                    this.state.wsActivityInfoProduct.map((item, index) => {
                                        return (
                                            <TouchableOpacity
                                                style={[styles.mainLi, { marginRight: Px2dp(14) }]}
                                                activeOpacity={.8}
                                                onPress={() => {
                                                    navigate("Commoditydetails", { "goodsInfo": { id: item.product_id } })
                                                }}
                                                key={index}
                                            >
                                                <CachedImage
                                                    source={{ uri: item.list_image }}
                                                    style={{ width: Px2dp(105), height: Px2dp(105), }} />
                                                <Text numberOfLines={2} style={styles.mainLiTit}>{item.full_name}</Text>
                                                <Text style={styles.mainPrice}>¥{(item.member_price / 100).toFixed(2)}</Text>
                                                <Text style={styles.mainTxt}>¥{(item.market_price / 100).toFixed(2)}</Text>
                                            </TouchableOpacity>
                                        )
                                    })
                                }
                            </View>
                            : null
                    }
                </ScrollView>
                <View style={styles.couponTitBom}>
                    <TouchableOpacity activeOpacity={0.8} style={[styles.commonBomBtn]} onPress={() => {
                        if (UserInfo.id) {
                            navigate("Coupon");
                        } else {
                            navigate("Login")
                        }
                    }}>
                        <Text style={styles.secondBtnTxt}>查看我的优惠券</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={0.8}
                        style={styles.commonBomBtn}
                        onPress={() => {
                            goBack()
                        }}>
                        <Text style={styles.firstBtntxt}>去逛</Text>
                    </TouchableOpacity>
                </View>
                {/* 加载loading */}
                {this.state.isLoading ? <Loading /> : null}
            </View>
        );
    }
    //获取活动优惠券数据
    _getWsActivityInfo() {
        this.setState({
            isLoading: true,
        })
        Fetch(requestUrl.URL, {
            "userId": UserInfo.id ? UserInfo.id : '',
            "wsActivityId": this.state.itemObj.bannerRedirectId
        }).then(data => {
            console.log(data)
            if (data.status == "SUCCESS") {
                // let wsCouponInfoList = [];
                // wsCouponInfoList = data.data.wsCouponInfoList;
                // let userCouponOfActivity = [];
                // userCouponOfActivity = data.data.userCouponOfActivity;
                // for (let i = wsCouponInfoList.length - 1; i >= 0; i--) {
                //     for (let j = userCouponOfActivity.length - 1; j >= 0; j--) {
                //         if (wsCouponInfoList[i].couponId == userCouponOfActivity[j].couponId) {
                //             wsCouponInfoList.splice(i, 1);
                //             break;
                //         }
                //     }
                // }
                var startTime = data.data.wsActivityInfo.startDate;
                var endrtTime = data.data.wsActivityInfo.endDate;
                var activity = "1";
                var nowTime = new Date();
                if (startTime > nowTime.getTime()) {
                    activity = "0";
                }
                if (endrtTime < nowTime.getTime()) {
                    activity = "2";
                }
                if (data.data.wsActivityInfo == null) {
                    activity = "0";
                }
                if ("0" == data.data.wsActivityInfo.status) {
                    activity = "2";
                }

                //status,0:未使用,1:已使用,2:过期
                let newArr = []
                newArr = data.data.wsCouponInfoList
                newArr.map((items) => {
                    data.data.userCouponOfActivity.map((item) => {
                        if (items.couponId == item.couponId) {
                            console.log(item.couponNum)
                            if (item.status == "0") {
                                items.status = "0"
                            }
                            else if (item.status == "1") {
                                items.status = "1"
                            }
                            else if (item.status == "2") {
                                items.status = "2"
                            }
                            else {
                                return true
                            }
                        }
                    })
                })
                var userInfo = data.data.userInfo
                if (UserInfo) {
                    var userFlag;
                    if (userInfo.status != "1") {
                        userFlag = '0';
                    } else if (userInfo.agentFlag == "1") {
                        userFlag = '4';
                    } else if (userInfo.memberFlag == "1") {
                        userFlag = '3';
                    } else if (userInfo.orderNum > 0) {
                        userFlag = '2';
                    } else {
                        userFlag = '1';
                    }
                    var limitFlag = "0";//1 受限  0无限制
                    var limitMsg = "欢迎";//限制信息
                    var orderNum = userInfo.orderNum;
                    var flag = data.data.wsActivityInfo.flag
                    if (userFlag == "0") {
                        limitFlag = "1";
                        limitMsg = "对不起，您无法参加该活动";
                    } else if ("0" == flag || userFlag == flag) {
                        limitFlag = "0";
                        limitMsg = "欢迎";
                    } else {
                        //单独对新人活动进行处理  订单为零的算新人
                        if ("1" == flag && orderNum < 1) {//新人活动且订单数小于1
                            limitFlag = "0";
                            limitMsg = "欢迎";
                        } else {
                            limitFlag = "1";
                            limitMsg = "此活动仅限" + this.getLimitMsg(flag) + "参加";
                        }
                    }
                }
                this.setState({
                    isLoading: false,
                    activity: activity,
                    limitFlag: limitFlag,
                    limitMsg: limitMsg,
                    wsActivityInfoProduct: data.data.wsActivityInfoProduct,
                    wsActivityInfo: data.data.wsActivityInfo,
                    list: newArr
                })
            } else if (data.status == "ERROR") {
                this.setState({
                    isLoading: false,
                })
                ToastShow({ "text": '获取活动优惠券数据失败' })
            } else {
                this.setState({
                    isLoading: false,
                })
            }
        })
    }
    getLimitMsg(flag) {
        var msg = "";
        switch (flag) {
            case "1": msg = "新人"; break;
            case "2": msg = "普通用户"; break;
            case "3": msg = "会员"; break;
            case "4": msg = "店主"; break;
        }
        return msg;
    }
    //渲染优惠券按钮
    _couponDom(item) {
        const { navigate, goBack } = this.props.navigation;
        switch (item.couponNum == 0 ? "2" : String(item.status)) {
            case '0':
                // 去使用
                return (
                    <TouchableOpacity activeOpacity={0.8} style={[styles.btnBox, { borderColor: "rgba(112,202,129,1)", }]} onPress={() => {
                        if (item.productIds == "0" && item.providerId == "" && item.secondCate == "") {
                            const resetAction = StackActions.reset({
                                index: 0,
                                actions: [NavigationActions.navigate({ routeName: 'Home' })],
                            });
                            this.props.navigation.dispatch(resetAction);
                        }
                        else {
                            navigate('SearchResult', { couponId: item.coupon_id ? item.coupon_id : item.couponId, providerId: item.providerId, product_ids: item.productIds, secondCate: item.secondCate })
                        }
                    }}>
                        <Text style={[styles.btnTxt, { color: "rgba(112,202,129,1)", }]}>去使用</Text>
                    </TouchableOpacity>
                )
                break;
            case '1':
                // 已使用
                return (
                    <TouchableOpacity activeOpacity={0.8} style={[styles.btnBox, { borderColor: "#9B9B9B" }]} onPress={() => {

                    }}>
                        <Text style={[styles.btnTxt, { color: "#9B9B9B" }]}>已使用</Text>
                    </TouchableOpacity>
                )
                break;
            case '2':
                // 已抢完
                return (
                    <TouchableOpacity activeOpacity={0.8} style={[styles.btnBox, { borderColor: "#9B9B9B" }]} onPress={() => {

                    }}>
                        <Text style={[styles.btnTxt, { color: "#9B9B9B" }]}>已抢完</Text>
                    </TouchableOpacity>
                )
                break;
            default:
                //点击领取
                return (
                    <TouchableOpacity activeOpacity={0.8} style={[styles.btnBox, { borderColor: "rgba(231,95,111,1)" }]} onPress={() => {
                        this._selectCoupon(item.id)
                    }}>
                        <Text style={[styles.btnTxt, { color: "rgba(231,95,111,1)" }]}>点击领取</Text>
                    </TouchableOpacity>
                )
                break;
        }
    }
    //领取活动优惠券
    _selectCoupon(id) {
        this.setState({
            isLoading: true,
        })
        Fetch(requestUrl.URL, {
            "userId": UserInfo.id,
            "activityId": this.state.itemObj.bannerRedirectId,
            "actiCouId": id
        }).then(data => {
            console.log(data)
            if (data.status == "success") {
                this.setState({
                    isLoading: false,
                })
                this._getWsActivityInfo()
            } else if (data.status == "ERROR") {
                this.setState({
                    isLoading: false,
                })
                ToastShow({ "text": '领取活动优惠券失败' })
            } else if (data.status == '1') {
                this.setState({
                    isLoading: false,
                })
                ToastShow({ "text": '该优惠券已抢光' })
            } else {
                this.setState({
                    isLoading: false,
                })
            }
        })
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.mainBg,
    },
    //领券标题
    couponTitBox: {
        marginBottom: Px2dp(14),
        width: SCREEN_WIDTH,
        height: Px2dp(185)
    },
    couponTit: {
        fontSize: Px2dp(24),
        color: Colors.red,
        marginTop: Px2dp(47),
        marginLeft: Px2dp(30),
        lineHeight: Px2dp(30),
        width: Px2dp(168),
    },
    //优惠券
    commonCode: {
        width: Px2dp(343),
        height: Px2dp(116),
        flexDirection: 'row',
        marginLeft: Px2dp(16),
        justifyContent: 'space-between',
        position: "relative"
    },
    moneyBox: {
        justifyContent: "center",
        marginLeft: Px2dp(12),
        alignItems: "center",
        flex: 1,
    },
    money: {
        fontSize: Px2dp(20),
        color: Colors.red,
        lineHeight: Px2dp(28)
    },
    moneyTxt: {
        fontSize: Px2dp(13),
        color: Colors.text666,
        lineHeight: Px2dp(18),
        marginTop: Px2dp(3)
    },
    detailInfo: {
        justifyContent: "center",
        marginLeft: Px2dp(27)
    },
    detailInfoTit: {
        fontSize: Px2dp(18),
        color: Colors.text333,
        lineHeight: Px2dp(25)
    },
    detailInfoTxt: {
        fontSize: Px2dp(12),
        color: Colors.text999,
        lineHeight: Px2dp(17),
        marginTop: Px2dp(10),
        width: Px2dp(164)
    },
    detailInfoDate: {
        fontSize: Px2dp(11),
        color: Colors.text999,
        lineHeight: Px2dp(16),
        marginTop: Px2dp(6)
    },
    btnBox: {
        width: Px2dp(70),
        height: Px2dp(25),
        top: Px2dp(40),
        right: Px2dp(25),
        borderWidth: Pixel,
        alignItems: "center",
        justifyContent: "center",
        position: "absolute"
    },
    btnTxt: {
        fontSize: Px2dp(13),
    },
    // 底部跳转按钮
    couponTitBom: {
        backgroundColor: Colors.white,
        height: Px2dp(50) + TabBar,
        paddingBottom: TabBar,
        flexDirection: 'row',
        justifyContent: "space-between",
        paddingLeft: Px2dp(24),
        paddingRight: Px2dp(24)
    },
    commonBomBtn: {
        alignItems: "center",
        justifyContent: "center"
    },
    firstBtntxt: {
        fontSize: Px2dp(16),
        color: Colors.text333
    },
    secondBtnTxt: {
        fontSize: Px2dp(16),
        color: Colors.red
    },
    //推荐列表
    mainLi: {
        width: Px2dp(105)
    },
    mainLiTit: {
        fontSize: Colors.text333,
        padding: 0,
        fontSize: Px2dp(12),
        minHeight: Px2dp(30),
        marginTop: Px2dp(8),
        paddingLeft: Px2dp(4),
        paddingRight: Px2dp(4)
    },
    mainTxt: {
        fontSize: Px2dp(12),
        color: Colors.text999,
        paddingBottom: Px2dp(15),
        textDecorationLine: "line-through"
    },
    mainPrice: {
        fontSize: Px2dp(15),
        color: Colors.red,
        marginTop: Px2dp(6),
    },
    wsActivityInfoProduct: {
        paddingLeft: Px2dp(16),
        flexDirection: "row",
        flexWrap: "wrap",
        alignItems: "center",
        backgroundColor: Colors.white,
        marginBottom: Px2dp(30),
        paddingTop: Px2dp(15)
    },
    //新领券样式
    newCoupon: {
        width: Px2dp(370),
        height: Px2dp(124),
        flexDirection: "row",
        position: "relative",
    },
    newCouponLf: {
        justifyContent: "center",
        alignItems: "center",
        width: Px2dp(110),
        paddingLeft: Px2dp(15)
    },
    newCouponLfPrice: {
        fontSize: Px2dp(30),
        color: Colors.white,
        fontWeight: "600"
    },
    newCouponLfPriceTag: {
        fontSize: Px2dp(20),
        color: Colors.white,
        fontWeight: "600"
    },
    newCouponLfTxt: {
        fontSize: Px2dp(15),
        color: Colors.white,
        marginTop: Px2dp(10)
    },
    newCouponCenter: {
        justifyContent: 'center',
        marginLeft: Px2dp(25)
    },
    newCouponCenterTit: {
        fontSize: Px2dp(14),
        color: Colors.text333,
        marginBottom: Px2dp(7),
        fontWeight: "500"
    },
    newCouponCenterdate: {
        fontSize: Px2dp(12),
        color: Colors.text999,
        lineHeight: Px2dp(15)
    },
    newCouponCenterdit: {
        fontSize: Px2dp(12),
        color: "rgba(74,74,74,1)",
        marginTop: Px2dp(7),
        fontWeight: "400"
    }
});
kingrome2009
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-native-switch：RN的可自定义开关组件
02-05
React本机开关 RN和React Native Web的可自定义开关组件 安装 $ npm install --save react-native-switch 要么 yarn add react-native-switch 用法 import { Switch } from 'react-native-switch' ; export const App = ( ) => ( < Switch xss=removed xss=removed xss=removed> console . log ( val ) } disabled = {
react native 原生js解决局部数据渲染
愿你走过半生，归来任是少年。
06-03 956
总体把控三点 封装 多态 继承 面向对象oop是一种编程思想，最大的好处就是让程序更容易维护增加了代码的重复利用效率。 所谓的手写对象 var per = { name:'laoyeye', age:'90', say:function(){ alert(this.name) } } 数据属性提供的高级功能没必要利用，但理...
react native 实现ListView的局部更新
君无意的博客
06-12 4438
在ReactNative中UI的刷新大多数情况依赖于state的变更，通过调用组件的setState方法来更新state以达到通知组件重新渲染UI的目的。当然这种做法是官方提供的标准解决方案，在进行简单UI设计时足以满足大多数需求。 但是当遇到结构复杂并存在数据交互的界面设计时，手动管理state这种做法则会把代码逻辑变得非常混乱，组件内不但要负责UI的渲染，还要兼顾state的变更以及不同组件
reactnative之setNativeProps（局部刷新）
zengyonglan的博客
06-05 5251
D5有时候我们需要直接改动组件并触发局部的刷新，但不使用state或是props。 setNativeProps 方法可以理解为web的直接修改dom。使用该方法修改 View 、 Text 等 RN自带的组件 ，则不会触发组件的 componentWillReceiveProps 、 shouldComponentUpdate 、componentWillUpdate 等组件生命周期中的方法。使用
React Native开发之——组件Switch
我的博客
03-12 1216
前言Switch：开关控件，类似于Android中的开关控件Switch。它需要一个onValueChange更新的回调函数value为了使组件反映用户操作，如果value组件未更新，组件将继续呈现所提供的value支持任何用户操作的预期结果。它有以下属性：value:是否打开。默认为falsedisabled:是否禁用 默认falseonTintColor：打开时背景色thumbTintColo...
react全套课程的讲义和静态资源
09-09
8. **React Native**：如果涉及，可能会讲解如何使用React原理开发原生移动应用，包括跨平台开发的基本概念和实践。 9. **服务器端渲染（SSR）**：React Server Rendering的概念和好处，以及如何通过ReactDOMServer...
react面试题-react-app-master.zip
01-04
以上是React面试中常见的知识点，对于"react-app-master"这个压缩包，可能是包含一个React项目模板或者面试题集，具体的学习或准备应根据压缩包内的具体内容来展开。在学习或面试前，建议对这些概念有深入的理解，并...
React
02-19
React主要使用JavaScript语言进行开发，但随着ES6+语法的普及，它也广泛采用了诸如箭头函数、类组件、模板字符串等现代JS特性。 1. **React基本概念**： - **组件**：React的核心是组件化，将UI拆分为独立、可复用...
mancity_pia
03-16
考虑到"mancity_pia"可能是一个项目，其源代码可能包含了上述知识点的实际应用，比如可能是一个基于JavaScript的曼城足球俱乐部相关网站或者应用，利用了AJAX获取实时比赛数据，使用React或Vue进行界面渲染，还可能...
react-native利用Switch控制手机状态栏
宏斌的博客
05-06 593
样式 ``animated动画 使用方式：比如要一个View组件产生动画效果用一个Animated.View组件代替View，里面正常写内容，然后需要发生变化的样式的值要用Animated.Value()指定，设置一个函数用来更改该样式的值来产生动画效果， 如果要让View的宽度从100在1000毫秒内变成300可以这样 //先定义一个值保存需要变化的样式的值 this.state = { ...
React Native Switch和Picker的认识
zww学习笔记
04-15 961
Switch属性方法 View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式) disabled bool 如果该值为true,用户就无法点击switch开关控件，默认为false onValueChange function 方法，当该组件的状态值发生变化的时候回调方法 value bool 该开关的值，如果该值为true的时候，开关呈打开状态，默认为false <V
ReactNative 基础 - 08 （开关Switch、文本输入框TextInput）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-16 437
开关和输入框：受控组件，通过状态修改值和对应的操作 1、开关：Switch value：开启状态 onValueChange：值发生改变触发 2、文本框：TextInput secureTextEntry：密文显示 onChangeText：值发生改变触发（实现数据的双向绑定） export default class App extends Component { state = {open: true, uname: '...
移动跨平台ReactNative开关组件Switch【15】
江咏之
04-20 1317
前端江太公 React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。 React Native系列导航 01-React Native 基础教程 02-安装ReactNative 03-.
react native Switch使用详解
老孟Flutter
04-18 1万+
Switch：开关控件 主要属性： value:是否打开。默认为false disabled:是否禁用 默认false onTintColor：打开时背景色 thumbTintColor：圆形按钮的背景颜色 tintColor：关闭时的边框颜色(iOS)或者背景颜色(Android)。 onValueChange：value值发生变化时的回调，参数为当前Switc
React Native控件之Switch与Picker组件讲解
MN1107
06-27 1522
React Native控件之Switch与Picker组件讲解（一）前言这篇文章主要介绍两个简单的组件Switch与Picker组件，这两个组件在实际开发中也是经常用到的。接下来我们来介绍一下这两个控件。（二）Switch组件2.1 Switch组件是Android与iOS平台通用组件，用于开/关两种状态的选择组件。 2.2 Switch属性方法 View相关样式属性都别继承过来 disable
移动跨平台ReactNative开关组件Switch【15】，聪明人已经收藏了
最新发布
m0_75280563的博客
04-06 733
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）一个好的心态和一个坚持的心很重要。
【React Native开发】React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)
热门推荐
江清清的专栏
01-31 1万+
(一)前言         今天我们一起来看一下Switch选择开关控件以及Picker选择器控件的介绍完全解析以及最佳实践。         刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!(二)Switch选择开关控件         2.1.该为An
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值