Réagissez natif TouchableOpacity onPress événement ne fonctionne pas appel d'autres classes

Question

Ce que je voulais faire était de créer un TouchableOpacity une fois et de l'utiliser partout dans mon programme. J'ai contré un problème lors de la gestion de l'événement de presse. J'ai importé le TouchableOpacity dans une autre classe et je voulais gérer l'événement onPress là-bas. Mais mon code ne fonctionne pas. Il n'y a pas non plus de problème avec l'importation. Voici ma classe importer le composant TouchableOpacity

import React, {Component} from 'react'; 
import {Text,View,Alert} from 'react-native'; 
import MyButton from './MyButton'; 

class FrontPage extends Component{ 
OnPressNextButton=()=> { 
    Alert.alert('You tapped the next button'); 
} 
OnPressBackButton=()=> { 
    Alert.alert('You tapped the back button'); 
} 
    render(){ 
    return(
     <View style={styles.viewStyle}> 
      <View > 
      <MyButton buttonText="Back" onPress={this.OnPressBackButton} /> 
      </View> 
      <View style={styles.marginStyle}> 
       <MyButton buttonText="Next" onPress={this.OnPressNextButton} /> 
      </View> 
     </View> 
    ); 

    } 
}const styles={ 
    viewStyle:{ 
    flexDirection:'row', 
    borderWidth:1, 
    borderBottomWidth:0, 
    borderRadius:2, 
    borderColor:'#ddd', 
    shadowColor:'#000', 
    shadowOffset:{width:0, height:2}, 
    shadowOpacity:0.2, 
    marginLeft:5, 
    marginRight:5, 
    marginTop:5, 
    elevation:1, 
    position:'relative' 
    },marginStyle:{ 
    marginLeft:128 
    } 
}; 
export default FrontPage; 

et le

composant TouchableOpacity est créé comme

import React,{Component} from 'react'; 
import {Text,View,TouchableOpacity} from 'react-native'; 
const MyButton=(props)=>{ 

    return(
    <TouchableOpacity style={styles.buttonStyle} > 
     <Text style={styles.textStyle}> 
     {props.buttonText} 
     </Text> 
    </TouchableOpacity> 
); 
} 
const styles={ 
    buttonStyle:{ 
    width:100, 
    height:50, 
    borderWidth:1, 
    alignItems:'center', 
    borderRadius:5, 
    backgroundColor:'#fff', 
    borderColor:'#007aff', 
    shadowOpacity:0.8, 
    marginLeft:5, 
    marginRight:5, 
    marginTop:455, 
    position:'relative' 
    }, 
    textStyle:{ 
    color:'#00f', 
    borderColor:'#007aff', 
    fontSize:20, 
    paddingTop:10, 
    paddingBottom:10, 
    fontWeight:'600' 
    } 
}; 
export default MyButton; 

Answer 1

Vous devriez passer props à onPress action dans votre composant TouchableOpacity dans ce code, je mets le même nom onPress rappel dans le composant FrontPage vous pouvez changer le nom onPress rappel dans ce composant avec le nom que vous voulez

Cela devrait être dans votre FrontPage Component

return(
    <View style={styles.viewStyle}> 
     <View > 
     <MyButton buttonText="Back" onPress={this.OnPressBackButton} /> 
     </View> 
     <View style={styles.marginStyle}> 
      <MyButton buttonText="Next" onPress={this.OnPressNextButton} /> 
     </View> 
    </View> 
); 

est ce devrait être votre composant TouchableOpacity

const MyButton=({ onPress })=>{ 

    return(
    <TouchableOpacity style={styles.buttonStyle} onPress={onPress}> 
     <Text style={styles.textStyle}> 
     {props.buttonText} 
     </Text> 
    </TouchableOpacity> 
); 
}