Card 组件中的背景颜色答案

【问题标题】：Background color in the Card componentCard 组件中的背景颜色
【发布时间】：2018-10-05 13:50:30
【问题描述】：

如何改变整张卡片的背景颜色？

在以下代码的情况下，颜色仅在Item元素下发生变化

整张卡片一直保持白色

<Card style={{flex:1, backgroundColor:'blue'}}>
    <CardItem header>
        <Text>List of users</Text>
    </CardItem>
    <List
        leftOpenValue={75}
        rightOpenValue={-75}
        dataSource={this.ds.cloneWithRows(this.state.data[0].users)}
        disableLeftSwipe = {true}
        renderRow={(item) => this._renderContent(item)}
    />
</Card>

【问题讨论】：

标签： react-native native-base

【解决方案1】：

您已为每个 cardItem 明确设置背景颜色

  <Card style={{flex:1, backgroundColor:'blue'}}>
        <CardItem header style={{backgroundColor:'blue'}}>
            <Text>List of users</Text>
        </CardItem>
        <List
            style={{backgroundColor:'blue'}}
            leftOpenValue={75}
            rightOpenValue={-75}
            dataSource={this.ds.cloneWithRows(this.state.data[0].users)}
            disableLeftSwipe = {true}
            renderRow={(item) => this._renderContent(item)}
        />
    </Card>

【讨论】：

【解决方案2】：

您不能更改 <Card> 背景颜色。您必须单独为卡片项目设置背景颜色。喜欢：

     <Container>
        <Header />
        <Content>
          <Card>
            <CardItem style={{backgroundColor: 'red'}}>
              <Body>
                <Text>
                   //Your text here
                </Text>
              </Body>
            </CardItem>
          </Card>
        </Content>
      </Container>

【讨论】：