帶刻度線的本機撥動開關

Question

我想要一個在react native中的撥動開關，當它打開時應該顯示一個刻度線，當它關閉時應該顯示一個十字標記。

它應該像這樣

[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: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
/>```