带有刻度线的 React 本机拨动开关

Question

我想要一个 react native 中的切换开关，它在打开时应该显示一个勾号，在它关闭时显示十字线。

应该是这样的

[反应原生切换开关]

请帮助我如何获得它。

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:[e-mail]
 * 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
/>```