React-native-paper，IconButton。如何在 IOS 和 Android 中制作按钮背景颜色？答案

【问题标题】：React-native-paper, IconButton. How to make button background color in IOS and Android?React-native-paper，IconButton。如何在 IOS 和 Android 中制作按钮背景颜色？
【发布时间】：2021-10-25 19:43:11
【问题描述】：

我想为react-native-paper 库中的IconButton 组件制作背景颜色。我在有关 backgroundColor 的文档中没有找到任何建议。我尝试在style 中使用backgroundColor。这适用于IOS，但不适用于android，我也尝试使用background prop，在Android上它会导致错误： ` 更新由 RCTView 管理的视图的属性“nativeBackgroundAndroid”时出错

java.lang.String 不能转换为 abi41_0_0。 com.facebook.react.bridge.ReadableMap `

这种带有 backgroundColor 风格的解决方案仅适用于 IOS：

<IconButton
    style={{
     backgroundColor: "#DBD7D2", //works on IOS only
     position: 'absolute',
     top: hp('7%'),
     alignSelf: 'flex-end',
     right: wp('0.2%'),
    }}
    icon="layers-outline"
    color={Colors.black}
    size={hp('3.5%')}
    onPress={() => setSatellite((prev) => !prev)}
/>

有什么建议吗？

【问题讨论】：

标签： reactjs react-native react-native-paper

【解决方案1】：

我没有找到使用 react-native-paper 的方法，所以我使用了 <TouchableOpacity> 和 <IonIcons> 示例：

 <TouchableOpacity activeOpacity={.5} onPress={() => setSatellite((prev) => !prev)} style={{
                        right: wp('2%'),
                        position: 'absolute',
                        top: hp('7%'),
                        alignSelf: 'flex-end',
                        width: wp('12%'),
                        height: hp('5%'),
                        justifyContent: "center",
                        marginTop: wp('2%'),
                        backgroundColor: "#DBD7D2",
                        borderRadius: hp('1%'),
                    }}>
                        <Ionicons
                        style={{alignSelf: "center"}} color={'#000000'} size={hp('4%')}
                        name={"layers-outline"}/>
                    </TouchableOpacity>

【讨论】：