gpt4 book ai didi

带有 TouchableOpacity onpress 的图像在 React Native 中不起作用

转载 作者:行者123 更新时间:2023-12-04 21:30:40 30 4
gpt4 key购买 nike

我是对原生开发使用react的新手。在我的一个屏幕中的应用程序中,我单击了图像。所以我在可触摸的不透明度中拍摄了图像,并为该可触摸的不透明度编写了 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',
}
});

这是上面代码的截图。

enter image description here

这里左箭头图像单击工作正常。我已经为那个灰色图像写了相同的onprees。但灰色图像点击不起作用。在这里,我尝试了两种方法,但没有奏效。
onPress={() => this.backArrow()}
onPress={this.login}

所以请指导我如何解决这个问题。提前致谢..

最佳答案

抱歉迟了回应,
它无法获得 flex,因为父 View 不包含任何 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>

或从 Touchable Opacity 样式中删除 flex:1。现在它会像魅力一样工作。

关于带有 TouchableOpacity onpress 的图像在 React Native 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52835096/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com