Вы можете использовать TouchableOpacity
для лучшего опыта. Вам не нужно определять границу n все с помощью TouchableOpacity
.
Попробуйте это - Live Demo
export default class App extends React.Component {
myButtonPressed(){
Alert.alert("Logout");
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={this.myButtonPressed}
style={styles.hLight}
>
<Text style={styles.text}> Login </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
hLight: {
fontSize: 30,
backgroundColor: "#BB2CD9",
paddingVertical: 10,
paddingHorizontal: 40,
borderRadius: 10,
borderWidth: 2,
borderColor: "#FFFFFF"
},
text: {
fontSize:20,
color:'white'
}
});
Использование TouchableHighlight
- Live
export default class App extends React.Component {
myButtonPressed(){
Alert.alert("Logout");
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
onPress={this.myButtonPressed}
style={styles.hLight}
>
<Text style={styles.text}> Login </Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
hLight: {
fontSize: 30,
backgroundColor: "#BB2CD9",
paddingVertical: 10,
paddingHorizontal: 40,
borderRadius: 10,
borderWidth: 2,
borderColor: "#FFFFFF"
},
text: {
fontSize:20,
color:'white'
}
});