我是 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;
最佳答案
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
关于javascript - onPress 事件不适用于 React Native 中的 View 、图像、可触摸不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57447453/