带刻度线的本机拨动开关

Question

我想在react native中使用一个拨动开关，当它打开时应该显示一个勾号，而当它关闭时应该显示一个叉号。

应该像this

[本机切换开关]

请帮助我如何获取它。

Answer 1

使用以下代码，并使用本地图像更新图像，如果您有任何疑问，请告知我们。

/**
 * toggle-switch-react-native
 * Toggle Switch component for react native, it works on iOS and Android
 * https://github.com/aminebenkeroum/toggle-switch-react-native
 * Email:amine.benkeroum@gmail.com
 * Blog: https://medium.com/@aminebenkeroum/
 * @benkeroumamine
 */

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated,
  Image,
} from 'react-native';

import PropTypes from 'prop-types'
import * as AppImages from '~/assets';

export default class ToggleSwitch extends React.Component {
  static calculateDimensions(size) {
    switch (size) {
      case 'small':
        return ({
          width: 50, padding: 10, circleWidth: 15, circleHeight: 15, translateX: 22,
        });
      case 'large':
        return ({
          width: 100, padding: 20, circleWidth: 30, circleHeight: 30, translateX: 38,
        });
      default:
        return ({
          width: 60, padding: 12, circleWidth: 18, circleHeight: 18, translateX: 26,
        });
    }
  }

  static propTypes = {
    isOn: PropTypes.bool.isRequired,
    label: PropTypes.string,
    onColor: PropTypes.string.isRequired,
    offColor: PropTypes.string.isRequired,
    size: PropTypes.string,
    labelStyle: PropTypes.object,
    onToggle: PropTypes.func.isRequired,
    icon: PropTypes.object,
  }

  static defaultProps = {
    isOn : false,
    onColor: '#634fc9',
    offColor: '#ecf0f1',
    size: 'medium',
    labelStyle: {},
    icon: null,
  }

  offsetX = new Animated.Value(0);
  dimensions = ToggleSwitch.calculateDimensions(this.props.size);

  createToggleSwitchStyle = () => ({
    justifyContent: 'center',
    width: this.dimensions.width,
    borderRadius: 20,
    padding: this.dimensions.padding,
    backgroundColor: (this.props.isOn) ? this.props.onColor : this.props.offColor,
  })

  createInsideCircleStyle = () => ({
    alignItems: 'center',
    justifyContent: 'center',
    margin: 4,
    position: 'absolute',
    backgroundColor: 'white',
    transform: [{ translateX: this.offsetX }],
    width: this.dimensions.circleWidth,
    height: this.dimensions.circleHeight,
    borderRadius: (this.dimensions.circleWidth / 2),
  });

  render() {
    const toValue = this.props.isOn
      ? this.dimensions.width - this.dimensions.translateX
      : 0;

    Animated.timing(
      this.offsetX,
      {
        toValue,
        duration: 300,
      },
    ).start();

    return (
      <View style={styles.container}>
        {(this.props.label)
          ? <Text style={[styles.labelStyle, this.props.labelStyle]}>{this.props.label}</Text>
          : null
        }
        <TouchableOpacity
          style={this.createToggleSwitchStyle()}
          activeOpacity={0.8}
          onPress={() => {
            this.props.onToggle(!this.props.isOn);
          }}
        >
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row'}}>
            <Image
              style={{height: 10, width: 10}}
              source={AppImages.check} //TODO UPDATE WITH YOUR CHECK IMGAE
            />
            <Image
              style={{height: 10, width: 10}}
              source={AppImages.check} //TODO UPDATE WITH YOUR CROSS IMGAE
            />
          </View>
            <Animated.View style={this.createInsideCircleStyle()} >{this.props.icon}</Animated.View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  labelStyle: {
    marginHorizontal: 10,
  },
});

像组件一样使用上述脚本，并像

一样使用它

从'./ToggleSwitch'导入ToggleSwitch; //更新您的组件路径

//您需要声明一个名为 isOn

的状态

//在渲染方法中使用以下代码

<ToggleSwitch
    isOn={this.state.isOn} // There should be a state like this.state.isOn(Set default value)
    onColor='green'
    offColor='red'
    label='Example label'
    labelStyle={{color: 'black', fontWeight: '900'}}
    size='large'
    onToggle={ () => this.setState({ !this.state.isOn }} } //To update state
/>```