React native android中React本地交换机的设计

是否有可能在类似android的IOS中获得相同的react native switch视图

---

已经尝试过一些NPM软件包（toggle switch react native、react native flip toggle button），但它们不适用于typescript

为typescript创建自定义组件怎么样

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

interface Props {
  onColor: string,
  offColor: string,
  label: string,
  onToggle: () => void,
  style: object,
  isOn: boolean,
  labelStyle: object
}

interface DefaultProps {
  onColor: string,
  offColor: string,
  label: string,
  onToggle: () => void,
  style: object,
  isOn: boolean,
  labelStyle: object
}

export default class Toggle extends React.PureComponent<Props> {

  animatedValue = new Animated.Value(0);

  static defaultProps: DefaultProps = {
    onColor: '#4cd137',
    offColor: '#ecf0f1',
    label: '',
    onToggle: () => { },
    style: {},
    isOn: false,
    labelStyle: {}
  }

  render() {

    const moveToggle = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 20],
    });

    const {
      isOn,
      onColor,
      offColor,
      style,
      onToggle,
      labelStyle,
      label
    } = this.props;

    const color = isOn ? onColor : offColor;

    this.animatedValue.setValue(isOn ? 0 : 1);

    Animated.timing(this.animatedValue, {
      toValue: isOn ? 1 : 0,
      duration: 300,
      easing: Easing.linear,
    }).start();

    return (
      <View style={styles.container}>

        {!!label && <Text style={[styles.label, labelStyle]}>{label}</Text>}

        <TouchableOpacity onPress={() => {

          typeof onToggle === 'function' && onToggle();

        }}>
          <View
            style={[
              styles.toggleContainer,
              style,
              { backgroundColor: color }
            ]}>
            <Animated.View
              style={[
                styles.toggleWheelStyle, {
                  marginLeft: moveToggle,
                }]}
            />
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  toggleContainer: {
    width: 50,
    height: 30,
    marginLeft: 3,
    borderRadius: 15,
    justifyContent: 'center',
  },
  label: {
    marginRight: 2,
  },
  toggleWheelStyle: {
    width: 25,
    height: 25,
    backgroundColor: 'white',
    borderRadius: 12.5,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.2,
    shadowRadius: 2.5,
    elevation: 1.5,
  }
})

import*as React from'React'；
从“react native”导入{动画、缓和、样式表、文本、TouchableOpacity、视图}；
界面道具{
onColor:字符串，
颜色：字符串，
标签：字符串，
onToggle:（）=>无效，
样式：对象，
伊森：布尔，
标签样式：对象
}
界面默认道具{
onColor:字符串，
颜色：字符串，
标签：字符串，
onToggle:（）=>无效，
样式：对象，
伊森：布尔，
标签样式：对象
}
导出默认类切换扩展React.PureComponent{
animatedValue=新的Animated.Value（0）；
静态defaultProps:defaultProps={
onColor:“#4cd137”，
offColor:“#ecf0f1”，
标签：“”，
onToggle:（）=>{}，
样式：{}，
伊森：错，
标签样式：{}
}
render（）{
const moveToggle=this.animatedValue.interpolate({
输入范围：[0，1]，
输出范围：[0,20]，
});
常数{
伊森，
onColor，
色彩斑斓，
风格
格洛格，
标签样式，
标签
}=这是道具；
const color=isOn？onColor:offColor；
这个.animatedValue.setValue（isOn？0:1）；
动画.计时（此.animatedValue{
toValue:isOn？1:0，
持续时间：300，
放松：放松，线性，
}).start（）；
返回(
{！！label&&{label}
{
onToggle的类型===“函数”&&onToggle（）；
}}>

<View style={styles.container}>
  <Toggle
    isOn={this.state.isOn}
    style={{ marginBottom: 10 }}
    onToggle={this.onToggle}
  />
  <Toggle
    label={'With Label'}
    isOn={this.state.more}
    onToggle={this.onToggleMore}
  />
</View>