React本机TouchableOpacity onPress事件无法从其他类调用
React本机TouchableOpacity onPress事件无法从其他类调用
提问于 2017-09-02 20:32:48
我想做的是创建一个TouchableOpacity，然后在我的程序中到处使用它。我在处理新闻事件时遇到了一个问题。我在其他类中导入了TouchableOpacity，并希望在那里处理onPress事件。但是我的代码不是working.There，导入也没有问题。下面是我导入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;回答 1
Stack Overflow用户
发布于 2017-09-03 02:29:14
您应该在TouchableOpacity组件中将props传递给onPress操作。在此代码中，我将相同的名称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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46013827
复制相关文章
相似问题
腾讯云开发者
