javascript - onPress 事件不适用于 React Native 中的 View 、图像、可触摸不透明度

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 仅适用于 Touchables，它应该如此

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

此功能不适用于 View 或图像。您需要将 View 包裹在可触摸(不透明度或 native 反馈)内以获得点击。

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

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