React Native 仿ios swtich（双平台）

最新推荐文章于 2024-04-17 09:39:44 发布

原创

最新推荐文章于 2024-04-17 09:39:44 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何在React Native项目中，针对iOS和Android风格不同的Switch组件，自定义实现与iOS风格一致的效果。通过定义View，设置样式，监听手势变化来改变动画效果，以及展示完整的MySwitch代码实现。

前言：终于开始做接触公司rn项目了，不容易啊！！！在项目需求中需要用到switch组件，但是在rn中，switch是基于各个平台自己的风格的，所以ios跟android是不一样的（这就尴尬了！咋办呢？自己定义呗，哈哈～～）,不废话了，先看看效果：

这里写图片描述

我们可以看到，rn原生的switch，两个平台中还是很大的差别的，为了跟需求一致（个人觉得android的好看），只好委屈自己去做成跟ios一样的效果，上图中也都已经看到我们实现好的效果图了，效果还是不错滴。

这里写图片描述

实现起来呢也是非常容易，小伙伴看到代码就知道了，稍后我会直接贴代码，先简单说一下实现方式：
1、定义一个view，然后设置style，里面放置一个圆形的背景是白色的thumb view。

render() {
        return (
            <View style={
   
   {
   
   marginTop: 20}}
                {
    
    ...this._panResponder.panHandlers}
            >
                <TouchableWithoutFeedback
                    onPress={this._onPress.bind(this)}
                >
                    <View
                        ref={(ref)=>{
                            this.container=ref;
                        }}onCheckChangeListener
                        style={[styles.container,{backgroundColor:this._getBgColor()}]}
                    >
                        <Thumb
                            style={[{
     
     
                                width:14*2,
                                height:14*2,
                                left:this._animatedThumbLeft,
                                top:0,
                                alignItems:'center'
                            }]}
                        />
                    </View>
                </TouchableWithoutFeedback>
            </View>
        );
    }

2、通过监听手势的变换（移动，抬起）改变相应的动画值，跟container的背景。

onPanResponderMove: (evt, gestureState) => {
                // 最近一次的移动距离为gestureState.move{X,Y}
                let x=(self._animatedThumbLeft._value+gestureState.dx);
                console.log('x-->'+x);
                if(x>17){
                    x=17
                }
                if(x<0){
                    x=0
                }
                self._animatedThumbLeft.setValue(x);
                // 从成为响应者开始时的累计手势移动距离为gestureState.d{x,y}
            },
            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => {
                // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
                // 一般来说这意味着一个手势操作已经成功完成。
                console.log('onPanResponderRelease');
                if(gestureState.dx==0){
                    self._onPress();
                }else{
                    if(self._animatedThumbLeft._value<8.5){
                        this.state.check=true;
                    }else{
                        this.state.check=false;
                    }
                    self._onPress();
                }
            },