如何在反应原生态中显示交换机内的文本(YES/NO)
问题描述:
我是反应原生的新手。在我的应用程序中,我使用开关并更改色调颜色来区分开和关,但我的实际要求是在开关内显示“YES”或“NO”文本,如下所示。如何在反应原生态中显示交换机内的文本(YES/NO)
这里是我的代码:
<Switch
onValueChange={this.change.bind(this)}
style={{marginBottom:10,width:90,marginRight:6,marginLeft:6}}
value={true}
thumbTintColor="#0000ff"
tintColor="#ff0000"
/>
请给我的建议来解决这个问题,任何帮助非常赞赏。
答
最后我得到了在关内开关.......
安装
NPM安装--save反应本地交换机
import { Switch } from 'react-native-switch';
<Switch
value={true}
onValueChange={(val) => console.log(val)}
disabled={false}
activeText={'On'}
inActiveText={'Off'}
backgroundActive={'green'}
backgroundInactive={'gray'}
circleActiveColor={'#30a566'}
circleInActiveColor={'#000000'}/>
答
我会从这样的事情开始,然后迭代和抛光,直到它满足要求,看起来不错。这不是一个完整的解决方案,但应该给你一些想法。
import React from 'react';
import { LayoutAnimation, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
const styles = StyleSheet.create({
container: {
width: 80,
height: 30,
backgroundColor: 'grey',
flexDirection: 'row',
overflow: 'visible',
borderRadius: 15,
shadowColor: 'black',
shadowOpacity: 1.0,
shadowOffset: {
width: -2,
height: 2,
},
},
circle: {
width: 34,
height: 34,
borderRadius: 17,
backgroundColor: 'white',
marginTop: -2,
shadowColor: 'black',
shadowOpacity: 1.0,
shadowOffset: {
width: 2,
height: 2,
},
},
activeContainer: {
backgroundColor: 'blue',
flexDirection: 'row-reverse',
},
label: {
alignSelf: 'center',
backgroundColor: 'transparent',
paddingHorizontal: 6,
fontWeight: 'bold',
},
});
class LabeledSwitch extends React.Component {
constructor(props) {
super(props);
this.state = {
value: props.value,
};
this.toggle = this.toggle.bind(this);
}
componentWillReceiveProps(nextProps) {
// update local state.value if props.value changes....
if (nextProps.value !== this.state.value) {
this.setState({ value: nextProps.value });
}
}
toggle() {
// define how we will use LayoutAnimation to give smooth transition between state change
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
const newValue = !this.state.value;
this.setState({
value: newValue,
});
// fire function if exists
if (typeof this.props.onValueChange === 'function') {
this.props.onValueChange(newValue);
}
}
render() {
const { value } = this.state;
return (
<TouchableOpacity onPress={this.toggle}>
<View style={[
styles.container,
value && styles.activeContainer]}
>
<View style={styles.circle} />
<Text style={styles.label}>
{ value ? 'YES' : 'NO' }
</Text>
</View>
</TouchableOpacity>
);
}
}
LabeledSwitch.propTypes = {
onValueChange: React.PropTypes.func,
value: React.PropTypes.bool,
};
LabeledSwitch.defaultProps = {
};
export default LabeledSwitch;
Switch的iOS和Android实现没有标签;你可以创建你自己的,或者使用类似于:https://github.com/Recr0ns/react-native-material-switch – peterp