问android中的React原生交换机设计
EN

Stack Overflow用户

提问于 2020-02-29 05:47:42

回答 1查看 1.6K关注 0票数 2

有没有可能在像IOS这样的android系统中获得相同的react native switch视图？

我已经尝试了一些NPM包(toggle switch-react-native，react-native-flip-toggle button)，但它们在typescript中不可行。

react-native

react-native-android

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-29 13:32:07

为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,
  }
})

像这样使用它

<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>