onPress 事件不适用于 React Native 中的视图、图像、touchableopacity

Question

I am newbie in React Native, I implemented onPress function on View component(I tried on touchableOpacity and NativeFeedBack) but it did not work on any of them. I don't understand why.

I wanted to implement buttons using images, so that when someone click on the button, the code runs. But things are not as expected.

import React, { Component } from 'react';
import {
    StatusBar,
    Image,
    View,
    Text,
    Dimensions,
    TouchableNativeFeedback
} from 'react-native';

import Constants from 'expo-constants';
class LandingScreen extends Component {

    render() {
        const resizeMode = 'cover';
        const text = '';
        const { width, height } = Dimensions.get('screen');
        return (
            <View
                  style={{
                    flex: 1,
                    backgroundColor: '#eee',
                    paddingStart:Constants.statusBarHeight
                  }}
                >
                      <StatusBar hidden />
                  <View
                    style={{
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      width: width,
                      height: height,
                    }}
                  >
                    <Image
                      style={{
                        flex: 1,
                        resizeMode,
                      }}
                      source={require('../assets/home.png') }
                    />
                  </View>
                  <TouchableNativeFeedback>
                  <View
                    style={{
                      position: 'absolute',
                      bottom: 100,
                      left: 40,
                      right:50,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >

                          <View>
                    <Image
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/SignInButton.png') }
                    />
                    </View>

                  </View>
                  </TouchableNativeFeedback>

                 // onPress dont work here as well

                  <TouchableNativeFeedback >
                  <View 
                    style={{
                      position: 'absolute',
                      bottom: 30,
                      left: 40,
                      right:50,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >

                          <View>
                    <Image onPress=()=>this.props.navigation.navigate('Main')}
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/LearnMoreButton.png') }
                    />
                    </View>

                  </View>
                  </TouchableNativeFeedback>

                   //here the onPress dont work

                  <View onPress={()=>console.log("Hello")}

                    style={{
                      position: 'absolute',
                      bottom: 310,
                      left: 60,
                      right:60,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >
                    <Image
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/Quote.png') }
                    />
                  </View>
                  <View
                    style={{
                      flex: 1,
                      backgroundColor: 'transparent',
                      justifyContent: 'center',
                    }}
                  >
                    <Text
                      style={{
                        textAlign: 'center',
                        fontSize: 40,
                      }}
                    >
                      {text}
                    </Text>
                  </View>
                </View>
        );
    }
}

export default LandingScreen;

Answer 1

onPress works only on Touchables it should be

<TouchableNativeFeedback onPress=()=>this.props.navigation.navigate('Main')/>

This function will not work on View or Image. You need to wrap the view inside touchable (opacity or native feedback) to get the click.

renderButton: function() {
  return (
    <TouchableOpacity onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('./myButton.png')}
      />
    </TouchableOpacity>
  );
}, 

https://facebook.github.io/react-native/docs/touchableopacity

Answer 2

I've modified your code. Try this. And as @Wolverine says, View and images don't have click props.

import React, { Component } from 'react';
import {
    StatusBar,
    Image,
    View,
    Text,
    Dimensions,
    TouchableNativeFeedback,
    TouchableOpacity
} from 'react-native';

import Constants from 'expo-constants';

export default class App extends Component {

    render() {
        const resizeMode = 'cover';
        const text = '';
        const { width, height } = Dimensions.get('screen');
        return (
            <View
                  style={{
                    flex: 1,
                    backgroundColor: '#eee',
                    paddingStart:Constants.statusBarHeight
                  }}
                >
                      <StatusBar hidden />
                  <View
                    style={{
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      width: width,
                      height: height,
                    }}
                  >
                    <Image
                      style={{
                        flex: 1,
                        resizeMode,
                      }}
                      source={require('../assets/home.png') }
                    />
                  </View>

 <TouchableOpacity onPress={() => this.props.navigation.navigate('Main')} >
                  <View
                    style={{
                      position: 'absolute',
                      bottom: 100,
                      left: 40,
                      right:50,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >


                    <Image
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/SignInButton.png') }
                    />

                    </View>
 </TouchableOpacity>

                 // onPress dont work here as well
                   <TouchableOpacity onPress={() => this.props.navigation.navigate('Main')} >
                  <View 
                    style={{
                      position: 'absolute',
                      bottom: 30,
                      left: 40,
                      right:50,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >

                    <Image 
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/LearnMoreButton.png') }
                    />

                  </View>
               </TouchableOpacity>
                   //here the onPress dont work
 <TouchableOpacity onPress={()=>console.log("Hello")} >
                  <View 
                    style={{
                      position: 'absolute',
                      bottom: 310,
                      left: 60,
                      right:60,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >
                    <Image
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/Quote.png') }
                    />
                  </View>

                  </TouchableOpacity>
                  <View
                    style={{
                      flex: 1,
                      backgroundColor: 'transparent',
                      justifyContent: 'center',
                    }}
                  >
                    <Text
                      style={{
                        textAlign: 'center',
                        fontSize: 40,
                      }}
                    >
                      {text}
                    </Text>
                  </View>
                </View>
        );
    }
}

Answer 3

I solved my issue by wraping inside "TouchableWithoutFeedback".

<TouchableWithoutFeedback
    onPress={() => {
        this.moveToAddNewCustomer()}
    }}
>
    <Image
        style={styles.newImage}
        source={require("~/assets/images/test123.png")}
     />
</TouchableWithoutFeedback>```