Question

我正在尝试使用标题和正文在react-native中创建cardview。但是，我想为标题添加背景色，但无法做到这一点。

我能够使用标题标题创建cardview，但无法添加覆盖标题整个部分的背景颜色。请参阅随附的图像，以获取我要实现的示例。如您所见，卡片视图具有摘要的标题，标题/标题部分具有灰色背景。标题下方是包含cardview内容的正文。我想在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

像这样编辑代码：

//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',
  },
});

Answer 2

尝试一下：

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

Cardview标题中的背景颜色（本机）

2 个答案: