按钮未在 android 中显示在 cardView 上，但在 iOS 中在本机反应中工作

Question

我正在 cardView 上创建一个按钮，它在 iOS --

中工作

但它在 android 中的工作方式不同，它显示为 ---

我的代码用于创建这个 -

  <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

我试过了

position : absolute

在按钮中，但它不起作用。

是在另一个class中创建的组件。

Answer 1

试试这个

<TouchableWithoutFeedback style={{ backgroundColor:"transparent",elevation:2}} onPress={()=>{
        if(this.props.onPress()){
            this.setState({isSelected:!this.state.isSelected});
        }
    }}>

这对我有用。