卡片视图标题中的背景颜色（react-native）

Question

我正在尝试在 react-native 中创建一个带有标题和正文的卡片视图。但是，我想为标题添加背景颜色但无法做到。

我能够创建带有标题标题的卡片视图，但无法添加覆盖整个标题部分的背景颜色。 有关我要实现的示例，请参见附加的图像。 如您所见，卡片视图有一个摘要标题，标题/标题部分有灰色背景。标题下方是包含卡片视图内容的正文。我想在 react-native 中实现相同的功能。有人可以帮忙吗？提前致谢

//This is an example of Card View// 

import React from 'react';
//import react in our code. 

import { Text, View, StyleSheet } from 'react-native';
//import all the components we are going to use.

import { Card } from 'react-native-elements';
//import Card

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Card title="Local Modules">
        {/*react-native-elements Card*/}
          <Text style={styles.paragraph}>
            This is a card from the react-native-elements
          </Text>
        </Card>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 40,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

Answer 1

试试这个：

<Card title={
    <View style={{ backgroundColor: 'red'}}>
      <Text>Local Modules</Text>
    </View>
  }
...
/>

Answer 2

像这样编辑你的代码：

//This is an example of Card View// 

import React from 'react';
//import react in our code. 

import { Text, View, StyleSheet } from 'react-native';
//import all the components we are going to use.

import { Card } from 'react-native-elements';
//import Card

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Card title="Local Modules">
          <View style={styles.header}>
              <Text> Summary </Text>
          </View>
          <Text style={styles.paragraph}>
            This is a card from the react-native-elements
          </Text>
        </Card>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 40,
    backgroundColor: '#ecf0f1',
  },
  header: {
   backgroundColor : '#C4C4C4'
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});