React-Native 自定義按鈕系列
對幾種按鈕點擊效果進行比較
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Button,
Alert,
View,
TouchableOpacity,
TouchableHighlight,
Text, TouchableWithoutFeedback,
} from 'react-native';
export default class ButtonView extends Component {
render() {
return(
<View style={{
backgroundColor: '#ffaaaa',
flex: 1,
alignItems: 'center',
justifyContent: 'center'}}>
<Button title="Button"
onPress={this.actionButton}
color={'#00f'}/>
<TouchableOpacity style={styles.touchButton}
onPress={() => {
alert('TouchableOpacity')
}}>
<Text style={styles.touchButtonText}>點擊按鈕1</Text>
</TouchableOpacity>
<TouchableHighlight activeOpacity={0.9}
underlayColor={'#1aaf00'}
style={[styles.touchButton]}
onPress={() => {
alert('TouchableHighlight')
}}>
<Text style={styles.touchButtonText}>點擊按鈕2</Text>
</TouchableHighlight>
{/*顯示背景 ,點擊顏色, 透明度也是無效*/}
<TouchableWithoutFeedback activeOpacity={0.9}
underlayColor={'#1aaf00'}
style={[styles.touchButton]}
onPress={() => {
alert('TouchableWithoutFeedback')
}}>
<Text style={styles.touchButtonText}>點擊按鈕2</Text>
</TouchableWithoutFeedback>
</View>
)
}
actionButton = () => {
alert('Button')
}
}
const styles = StyleSheet.create({
touchButton: {
height: 40,
width: 100,
borderRadius: 20,
backgroundColor: '#fa1faa',
justifyContent: 'center',
overflow: 'hidden',
},
touchButtonText: {
color: 'white',
textAlign: 'center',
}
});
AppRegistry.registerComponent('ButtonView', ()=> ButtonView);