web-dev-qa-db-ja.com

TouchableOpacityonpressがreactNativeで機能しない画像

私はネイティブ開発に反応するのは初めてです。私のアプリケーションでは、1つの画面で画像をクリックします。だから私はタッチ可能な不透明度の内側の画像を撮り、そのタッチ可能な不透明度にオンプレスメソッドを書きました。しかし、オンプレスは機能していません。しかし、私は別の画像に同じコードを書きましたが、これは機能しています。

これはコードです

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

ここで左矢印の画像をクリックすると正常に機能します。私はそのグレー画像に同じオンプリを書きました。しかし、グレー画像のクリックは機能しません。ここで私は両方の方法を試しましたが、機能しませんでした。

onPress={() => this.backArrow()}
onPress={this.login}

だから、この問題を解決する方法を教えてください。前もって感謝します..

imagereact-nativetouchableopacityonpress
5
rams

応答が遅れて申し訳ありません。親ビューにフレックスが含まれていないため、フレックスを取得できません。だからこれを試してみてください：-

<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を削除します。今では魅力のように機能します。

1
Shubham

ここで問題はデザインにあります。デザインを変更した場合、正常に機能しています。ここで私はflex-directionを変更しました： 'row'

<View style={{backgroundColor: "#fff",padding: 10,*flexDirection: 'row'*}}>
                 <Image source={require('../../app/images/logo_SEDC_110n40.png')} style={{marginLeft: -10}}></Image>
                 <TouchableOpacity onPress={this.logout} style={styles.signoutContainer}> 
                    <Image source={require('../../app/images/ic_Signout.png')} style={styles.signOutImage}></Image>
                 </TouchableOpacity>
             </View>
0
rams

これは、バインディングの問題が原因である可能性があります。以下のようにonclickメソッドをバインドしてみてください

  constructor(props) {
    super(props);
    this.login = this.login.bind(this);    
  }

次に、この関数を次のように呼び出します

onPress={this.login}
0
Vinayak B

入れてみてくださいonPress = {this.backArrow}

0
Rudolf Cicko