android 中的 React 本机开关设计

Question

是否有可能在 android 中获得与 IOS.

相同的 React Native 开关视图

已经尝试了一些 NPM 包（toggle-switch-react-native、react-native-flip-toggle-button），但它们不适用于打字稿。

Answer 1

如何为打字稿创建自定义组件？

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>

DEMO

android 中的 React 本机开关设计

React native switch design in android

react-native

react-native-android