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

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')/>

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

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

Answer 3

我通过将“TouchableWithoutFeedback”包裹起来解决了我的问题。

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

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

onPress event not working on views, images, touchableopacity in react native

javascript

react-native

react-native-navigation