Question

我是React和React Native的初学者，来自Vue。我正在制作我的第一个应用程序，对如何更改Card元素的背景颜色感到困惑。

这是我的代码：

import React, { Component } from 'react';
import { View, Text, StyleSheet, StatusBar, Platform } from 'react-native';
import { Card } from 'react-native-elements';

export default class Home extends Component {

    render() {

        return (
            <View style={ styles.container }>
                <Card style={ styles.card__today }>
                    <View style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", backgroundColor: 'orange'}}>
                        <View>
                            <Text>First</Text>
                        </View>
                        <View>
                            <Text>Second</Text>
                        </View>
                    </View>
                    <View style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly", backgroundColor: "red" }}>
                        <View>
                            <Text>First</Text>
                        </View>
                        <View>
                            <Text>Second</Text> 
                        </View>
                        <View>
                            <Text>Third</Text>
                        </View>
                    </View>
                </Card>
            </View>
        );
    }
}


const styles = StyleSheet.create({

    container: {
        paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
        backgroundColor : 'skyblue',
        height: '100%',
    },

    card__today: {
        display: "flex",
        flexDirection: "column", 
        backgroundColor: "red"
    },

})

这是当前外观的屏幕截图：

如您所见，卡片中的两个弹性项目都具有各自的背景色，但是Card元素本身没有。我想知道为什么行为不同，如何更改卡的背景颜色？

我已经尝试过的事情：

像其他视图一样内联编写样式
使用此处引用的wrapperStyle和containerStyle道具：https://react-native-elements.github.io/react-native-elements/docs/card.html

均无济于事。

谢谢！

Answer 1

如下所述，我尝试同时使用 ios 和 android ，并且可以与 containerStyle 一起使用。使用 containerStyle 而不是 style

再次检查

<Card containerStyle={styles.card__today}>

如有疑问，请放心。

反应本机卡背景色

1 个答案: