带有TouchableOpacity onpress的图像在react native中不起作用
带有TouchableOpacity onpress的图像在react native中不起作用
提问于 2018-10-16 20:06:58
我对本机开发的反应是新的。在我的应用程序中，在一个屏幕中，我有图像点击。因此，我在可触摸不透明度中获取图像，并将onpress方法写入可触摸不透明度中。但onpress不起作用。但我已经为另一个图像编写了相同的代码，但这个可以工作。
这是代码
mport React, {Component} from 'react';
import {Text, View,TouchableHighlight,TouchableOpacity,StyleSheet,StatusBar,Image} from 'react-native';
export default class Profile extends Component {
static navigationOptions = ({ navigation }) => {
return {
title: `Welcome`,
header: null,
}
};
render() {
const { state, navigate } = this.props.navigation;
return (
<View style={styles.MainContainer}>
<StatusBar
barStyle="light-content"
backgroundColor="#2f5597"
/>
<View style={{backgroundColor: "#fff",padding: 10}}>
<Image source={require('../../app/images/ic_visa.png')} style={{marginLeft: -10}}></Image>
<TouchableOpacity onPress={() => this.backArrow()} style={styles.signoutContainer}>
<Image source={require('../../app/images/ic_Signout.png')} style={styles.signOutImage}></Image>
</TouchableOpacity>
</View>
<View style={{backgroundColor: "#2f5597",flexDirection: 'row',alignItems: 'center'}}>
<TouchableOpacity onPress={() => this.backArrow()} style={{padding: 12.5,justifyContent: 'center',alignItems: 'center', backgroundColor:"#2f5597"}}>
<Image source={require('../../app/images/ic_arrow_white.png')} style={{justifyContent: 'flex-start',alignSelf: 'center',alignContent: 'center'}}></Image>
</TouchableOpacity>
<Text style={{padding: 10,color:'#fff', backgroundColor:"#2f5597", fontSize: 18,fontWeight: "bold", paddingLeft: 5,alignSelf: 'center'}}>Confirm payment</Text>
<View style={styles.signoutContainer}>
<Text style={{color: '#fff',alignSelf: 'flex-end',marginRight: 30}}>743509-001</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginLeft: 30, marginTop: 30}}>
<Image source={require('../../app/images/ic_right.png')} style={{height: 48, width: 56}}></Image>
<Text style={{alignSelf: 'center',fontSize: 20,color: '#000',marginLeft: 10}}>Payment Successful</Text>
</View>
<Text style={{marginLeft: 30,marginTop: 10,color: '#000',fontSize: 14}}>Thank you for your payment.</Text>
<Text style={{marginLeft: 30,marginTop: 10,color: '#000',fontSize: 14,textAlign: "justify", marginRight: 30}}>This page serves as your receipt and provides you with the confirmation number ****** that can be used for further reference. </Text>
<View style={styles.buttonContainer}>
<TouchableHighlight
onPress={this.login}
style={[styles.btn]}>
<Text style={{color: 'white'}}>MAKE ANOTHER PAYMENT</Text>
</TouchableHighlight>
</View>
</View>
);
}
login=()=>{
console.log('Hi button click');
alert("make another payment......");
}
backArrow=()=>{
// alert("Go to account list......");
this.props.navigation.goBack();
}
}
const styles = StyleSheet.create({
MainContainer :{
backgroundColor: "#fff",
// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1,
margin: 0
},
signoutContainer: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
numberContainer: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: '#fff000'
},
signOutImage:{
alignSelf: 'flex-end',
width: 35,
height: 35,
},
buttonContainer: {
flex: 1,
backgroundColor: '#FFF',
},
btn:{
alignSelf: 'stretch',
borderRadius: 6,
backgroundColor: '#2f5597',
padding: 10,
marginTop: 30,
marginLeft: 30,
marginRight: 30,
alignItems: 'center',
}
});这是上面代码的截图。
在这里左箭头图像单击工作很好。我已经写了同样的关于那个灰色的图像。但灰度图像点击不起作用。在这里，我尝试了这两种方法，但都不起作用。
onPress={() => this.backArrow()}
onPress={this.login}所以请指导我如何解决这个问题。提前谢谢..
回答 4
Stack Overflow用户
发布于 2019-07-24 02:48:13
很抱歉延迟响应，无法获取flex，因为父视图不包含任何flex。所以试试这个：-
<View style={{backgroundColor: "#fff",padding: 10, flex:1}}>
<Image source={require('./chnIcon.png')} style={{marginLeft: -10}}></Image>
<TouchableOpacity onPress={() => this.backArrow()} style={styles.signoutContainer}>
<Image source={require('./calendar_icon.png')} style={styles.signOutImage}></Image>
</TouchableOpacity>
</View> 或者从可触摸不透明样式中删除flex:1。现在，它将像魅力一样发挥作用。
Stack Overflow用户
发布于 2018-10-16 20:13:27
这可能是由于绑定问题造成的。尝试绑定onclick方法，如下所示
constructor(props) {
super(props);
this.login = this.login.bind(this);
}然后调用此函数，如下所示
onPress={this.login}Stack Overflow用户
发布于 2018-10-16 22:02:44
尝试将onPress={this.backArrow}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52835096
复制相关文章
相似问题
腾讯云开发者
