onPress事件不适用于响应本机中的视图，图像，可触摸不透明度

Question

我是React Native的新手，我在View组件上实现了onPress函数（我在touchableOpacity和NativeFeedBack上进行了尝试），但不适用于其中的任何一个。我不明白为什么。

我想使用图像实现按钮，以便当有人单击按钮时，代码运行。但是事情并没有达到预期。

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仅在应启用的可触摸对象上起作用

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

此功能不适用于View或Image。您需要将视图包装在可触摸（不透明或本机反馈）中才能获得点击。

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

我已经修改了您的代码。尝试这个。正如@Wolverine所说，View和images没有点击道具。

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>
        );
    }
}