4、 Button component

Button Components

A simple button

_onPressButton() {
    
    Alert.alert('You tapped the button!')
 }
<Button
	onPress={
    this._onPressButton}
	title="OK!"
  color="#841584"
 />

Touchable Series components #

The style of this component is fixed . So if its appearance doesn't match your design , Then you need to use TouchableOpacity or TouchableNativeFeedback Component to customize the buttons you need , Video tutorial How to make a button Describes the complete process . Or you can be in github.com Search on website ‘react native button’ Take a look at the works of others in the community .

Which components are used , It depends on what kind of visual feedback you want to give users ：

• Generally speaking , You can use TouchableHighlight To make buttons or links . Note that the background of this component will darken when the user's finger is pressed .
• stay Android You can also use TouchableNativeFeedback, It will create a visual effect similar to ink ripples when the user's finger presses .
• TouchableOpacity It reduces the transparency of the button when the user presses it with his finger , Without changing the color of the background .
• If you want to process click events without any visual feedback , You need to use TouchableWithoutFeedback.

In some scenarios, you may need to detect whether the user has made a long press operation . You can use... In any of the components listed above onLongPress Property to implement .

class Buttonbasics extends Component {
    
  _onPressButton() {
    
    Alert.alert('You tapped the button!');
  }

  _onLongPressButton() {
    
    Alert.alert('You long-pressed the button!');
  }
  render() {
    
    return (
      <View style={
    styles.container}>
        <TouchableHighlight onPress={
    this._onPressButton} underlayColor="white">
          <View style={
    styles.button}>
            <Text style={
    styles.buttonText}>TouchableHighlight</Text>
          </View>
        </TouchableHighlight>
        <TouchableOpacity onPress={
    this._onPressButton}>
          <View style={
    styles.button}>
            <Text style={
    styles.buttonText}>TouchableOpacity</Text>
          </View>
        </TouchableOpacity>
        <TouchableNativeFeedback
          onPress={
    this._onPressButton}
          background={
    
            Platform.OS === 'android'
              ? TouchableNativeFeedback.SelectableBackground()
              : ''
          }>
          <View style={
    styles.button}>
            <Text style={
    styles.buttonText}>TouchableNativeFeedback</Text>
          </View>
        </TouchableNativeFeedback>
        <TouchableWithoutFeedback onPress={
    this._onPressButton}>
          <View style={
    styles.button}>
            <Text style={
    styles.buttonText}>TouchableWithoutFeedback</Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableHighlight
          onPress={
    this._onPressButton}
          onLongPress={
    this._onLongPressButton}
          underlayColor="white"
          >
          <View style={
    styles.button}>
            <Text style={
    styles.buttonText}>Touchable with Long Press</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    
  container: {
    
    paddingTop: 60,
    alignItems: 'center',
  },
  button: {
    
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3',
  },
  buttonText: {
    
    textAlign: 'center',
    padding: 20,
    color: 'white',
  },
});

export default Buttonbasics;