【发布时间】：2015-11-27 15:13:13
【问题描述】：
希望一切都好。
我似乎在使用基本按钮功能时遇到了困难。我只需要更改类的状态以及每次按下按钮时更改的按钮样式。与 TouchableHighlight 不同，我需要更改颜色以保持直到再次按下按钮（返回到原始颜色）。
我曾尝试使用 SwitchIOS，但它似乎并不容易设计成圆形按钮，因此并没有真正奏效。我是一个新手，所以还在学习，非常感谢你的帮助。这是我目前所拥有的：
'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var Icon = require('react-native-vector-icons/FontAwesome');
var {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS,
Image,
TouchableHighlight,
TextInput,
} = React;
class LS1 extends React.Component{
constructor(props){
super(props);
this.state = {
paleo: false,
vegan: false,
vegetarian: false,
nutfree: false,
dairyfree: false,
healthy: false,
glutenfree: false,
}
}
SkipLogin() {
var num = window.height/8.335;
console.log(num);
}
render() {
return (
<View style={styles.container}>
<Image source={require('image!LS1')} style={styles.bgImage}>
<Text style={styles.icontext}>Help us get to know your dietary lifestyle.</Text>
<View style={styles.container}>
<View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-20}}>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.9)' style={styles.bubblechoice}>
<Image style={styles.bubblechoice} source={require('image!vegan')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Vegan</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!paleo')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Paleo</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!nutfree')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Nut-Free</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!glutenfree')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Gluten-Free</Text>
</View>
</Image>
</TouchableHighlight>
</View>
<View style={{flex: 1, alignItems: 'center', flexDirection: 'row',justifyContent: 'center',marginTop:-50}}>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!dairyfree')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Dairy-Free</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,0.6)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!vegetarian')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Vegetarian</Text>
</View>
</Image>
</TouchableHighlight>
<TouchableHighlight underlayColor='rgba(73,182,77,1,1)' style={styles.bubblechoice} >
<Image style={styles.bubblechoice} source={require('image!healthy')}>
<View style={styles.overlay}>
<Text style={styles.choicetext}>Healthy</Text>
</View>
</Image>
</TouchableHighlight>
</View>
</View>
<Image source={require('image!nextbtn')} style={{resizeMode: 'contain', width:200, height:50, alignSelf: 'center', marginBottom: 50}}/>
<TouchableHighlight onPress={this.SkipLogin.bind(this)} underlayColor='transparent'>
<View style={{backgroundColor: 'transparent', alignItems: 'center', marginBottom: 8}}>
<Text>skip this step</Text>
</View>
</TouchableHighlight>
</Image>
</View>
);
}
};
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent'
},
bgImage: {
flex: 1,
width: window.width,
resizeMode: 'cover',
},
icontext: {
color: '#5d5d5d',
fontWeight: '400',
fontSize: 20,
backgroundColor: 'transparent',
paddingLeft: 10,
alignItems: 'center',
marginTop: window.height/2.2,
textAlign: 'center',
margin: 10,
},
bubblechoice_click: {
height: window.height/8.335,
borderRadius: (window.height/8.3350)/2,
marginRight: 2,
width: window.height/8.335,
},
bubblechoice: {
height: window.height/8.335,
borderRadius: (window.height/8.3350)/2,
marginRight: 2,
width: window.height/8.335,
},
row: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
marginTop: -30,
},
choicetext: {
alignItems: 'center',
alignSelf: 'center',
color: 'white',
marginTop: 35,
fontWeight: '600',
marginLeft: -18,
fontSize: 14,
flex: 1,
textAlign: 'center'
},
overlay: {
backgroundColor:'rgba(80,94,104,0.7)',
height: 100,
width: 100,
alignItems:'center'
},
});
module.exports = LS1;
这是产生的视觉效果：
这是按钮被选中后的样子：
【问题讨论】：
-
无关：看起来很酷的项目！ :D
-
@Trip 谢谢！它真的来了 - 在这里查看 alpha：vimeo.com/202845865
标签： javascript user-interface button react-native