0

我想做的是创建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;
4

1 回答 1

1

您应该在此代码中传递props到onPress您的TouchableOpacity组件中的操作我在组件中放置了相同名称onPress的回调您可以使用您想要FrontPage的名称更改此组件中的名称回调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>
  );
}
于 2017-09-02T18:29:13.517 回答