反应本机 TouchableOpacity onPress 事件无法从其他类调用答案

【问题标题】：React native TouchableOpacity onPress event not working calling from other class反应本机 TouchableOpacity onPress 事件无法从其他类调用
【发布时间】：2017-09-02 12:32:48
【问题描述】：

我想做的是创建一个TouchableOpacity 并在我的程序中到处使用它。我在处理新闻事件时反驳了一个问题。我在其他类中导入了TouchableOpacity，并想在那里处理 onPress 事件。但是我的代码不起作用。导入也没有问题。这是我的类导入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;

TouchableOpacity 组件被创建为

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;

【问题讨论】：

您在哪里处理组件中的onPress？你没有。
这就是我要问的。我在哪里以及如何处理 onPress？

标签： react-native touchableopacity onpress

【解决方案1】：

您应该在此代码中的TouchableOpacity 组件中将props 传递给onPress 操作我在FrontPage 组件中放置了相同名称的onPress 回调您可以在此组件中更改名称onPress 回调用你想要的名字

这应该在您的 FrontPage 组件中

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>
);

这应该是你的TouchableOpacity 组件

const MyButton=({ onPress })=>{

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

【讨论】：

谢谢伙计。我明白了。应该是 const MyButton=(props)=>{ return( {props.buttonText} ); }