react-native - 按钮未显示在 android 中的 cardView 上,但在 iOS 中以反应本机工作
问题描述
我在 cardView 上创建一个按钮,它在 iOS 中工作——
我的代码是用于创建这个 -
<View>
<Card containerStyle={{height: 100, borderRadius: 8, borderWidth: 0}}>
<View
style={[a_styles.horizontal_space_between_verticalCenter, {backgroundColor: 'transparent',}]}>
<View style={{
backgroundColor: 'transparent',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
}}>
<Text numberOfLines={7} style={{
fontSize: 13,
color: 'black',
fontWeight: '500',
width: responsiveWidth(50)
}}>{item.name}</Text>
<Text style={{fontSize: 10, color: 'black'}}></Text>
</View>
<View style={{
backgroundColor: 'transparent',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
}}>
<Text style={{
fontSize: 13,
color: 'black',
fontWeight: '100'
}}>{translate("price")}</Text>
<Text
style={{
fontSize: 13,
fontWeight: '600',
color: 'black'
}}>{item.price}/-</Text>
</View>
</View>
<View style={{
backgroundColor: 'transparent',
width: "25%",
alignSelf: "flex-end",
alignItems: 'flex-end',
}}>
<TouchableOpacity style={{backgroundColor: "transparent"}} onPress={() => {
this.viewAll(item.services);
}}>
<Text style={{
fontSize: 12,
backgroundColor: "transparent",
fontWeight: '500',
color: Colors.appDarkBlueColor,
paddingBottom: responsiveHeight(1.5)
}}>{translate("view_details")}</Text>
</TouchableOpacity>
</View>
{item.discount != 0 &&
<View style={{
justifyContent: 'flex-end', backgroundColor: 'blue'
}}>
<Text style={{
textAlign: 'right',
fontSize: 10, color: 'green',
textDecorationLine: 'line-through',
textDecorationStyle: 'solid',
fontWeight: '100'
}}>{item.discount} {translate('sr')}</Text>
</View>
}
<View style={{height: 7}}/>
</Card>
<SelectRentalButton isSelected={item.isSelected} onPress={() => {
return this.selectItem(item);
}}/>
</View>
我将此组件用作按钮
<SelectRentalButton isSelected={item.isSelected} onPress={() => {
return this.selectItem(item);
}}/>
该组件的代码是 -
<TouchableWithoutFeedback style={{ backgroundColor:"transparent"}} onPress={()=>{
if(this.props.onPress()){
this.setState({isSelected:!this.state.isSelected});
}
}}>
<View>
<View style={{
justifyContent: 'center',
alignItems: 'center',
flex: 1,
elevation: 2,
backgroundColor: 'white',
height: 36,
marginLeft: 30,
marginRight: 30,
marginTop:-20,
borderRadius: 18,
borderWidth: 1,
borderColor: Colors.appDarkBlueColor,
}}>
<Text style={{
color: ALL_COLORS.theme_blue,
fontSize: responsiveFontSize(2),
fontWeight: '600'
}}>{translate("selected")}</Text>
{
this.state.isSelected &&
<View style={{
backgroundColor: Colors.appDarkBlueColor,
borderRadius: 20, height: 36,
width: 70,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
right: -1, top: 0
}}>
<Image source={require('../Images/cancel.png')}/>
</View>
}
</View>
</View>
</TouchableWithoutFeedback>)
this is the problem in android device , but correctly working in iOS device
我努力了
位置:绝对
在按钮中,但它不起作用。
是在另一个类中创建的组件。
解决方案
尝试这个
<TouchableWithoutFeedback style={{ backgroundColor:"transparent",elevation:2}} onPress={()=>{
if(this.props.onPress()){
this.setState({isSelected:!this.state.isSelected});
}
}}>
这对我有用。
推荐阅读
- javascript - 在 React 组件中, foo(){} 和 bar = () => {} 有什么区别,我什么时候应该使用哪个?
- json - 需要从 JSON 文件中读取一个变量以在脚本的另一部分作为变量输入
- node.js - 如何:从 2 个 API 获取数据、比较、POST bool
- apache-spark - 驱动程序不会在集群模式下停止
- sql - 创建一个包含更多列的 sql 连接
- c# - 正则表达式在匹配其他条件时查找不包含空格的字符串
- php - PHP没有为测验调用数组
- sql - 状态栏中的 SPID 与 @@SPID 不同
- android - React-Native android 设备看不到控制台远程调试
- android-studio - 当它是来自 admob 的我的 adUnitId 时,缺少必需的 XML 属性“adSize”