Question

在Card Component中用于反应本机元素

我正在尝试通过将border设置为0并将borderColor设置为transparent来摆脱边框，但是仍然有灰色轮廓

      <Card
        containerStyle={{borderWidth: 0, borderColor: 'transparent', elevation: 0}}
        title='HELLO WORLD'
        image={require('../images/pic2.jpg')}>
        <Text style={{marginBottom: 10}}>
          The idea with React Native Elements is more about component structure than actual design.
        </Text>  
      </Card>

原以为它可能是盒子阴影，但事实并非如此

Answer 1

在我所看到的所有示例中，似乎React native元素的Card组件都有一个灰色边框。我建议您构建自己的卡组件。从这样的东西开始，然后根据需要对其进行样式设置。这个有一点阴影，您可以通过传递一个noShadow道具来关闭它。

import React from 'react';
import { View, StyleSheet } from 'react-native';

const Card = (props) => {
  let shadowStyle = {
    shadowColor: COLORS.grey3,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: .5,
    shadowRadius: 12,
    elevation: 1,
  }
  if (props.noShadow) {
    shadowStyle = {}
  }
  return (
    <View style={[styles.containerStyle, props.style, shadowStyle]}>
      {props.children}
    </View>
  );
};


const styles = StyleSheet.create({
  containerStyle: {
    padding: 10,
    marginHorizontal: 10,
    backgroundColor: COLORS.white,
    borderRadius: 3,
  }
})

export { Card };

然后，当您只想使用它时

import { Card } from './yourCustomCardFile'

然后在您的渲染方法中

<Card>
<Text>Any content you want to include on the card</Text>
<Text>More content that you want on the card</Text>
</Card>

Answer 2

我遇到了同样的问题，并且发现出现边框是因为Card元素的高程默认设置为1

您可以覆盖此设置（对于android）：

<Card containerStyle={{elevation:0, backgroundColor:#123}}/>

以及在IOS中：

const styles = {
  container: {
    shadowColor: 'rgba(0,0,0, .2)',
    shadowOffset: { height: 0, width: 0 },
    shadowOpacity: 0, //default is 1
    shadowRadius: 0//default is 1
  }
}

<Card containerStyle={styles.container} />

Answer 3

已经晚了，但似乎仍有很多人在寻找答案。

React Native Elements默认情况下同时设置了borderWidth和shadowProps，因此，要完全删除边框，您需要同时删除Border和Shadow。 / p>

    <Card
      containerStyle={styles.cardCnt}
      <Text>
        Content
      </Text>
    </Card>

const styles = {
    cardCnt: {
    borderWidth: 0, // Remove Border
    shadowColor: 'rgba(0,0,0, 0.0)', // Remove Shadow IOS
    shadowOffset: { height: 0, width: 0 },
    shadowOpacity: 0,
    shadowRadius: 0,
    elevation: 0 // This is for Android
  }
}

Answer 4

设置为屏幕背景色脏但问题解决了。

Answer 5

将elevation设置为0，将borderColor设置为white，

<Card containerStyle={{ elevation: 0, borderColor: "white" }}>

摆脱Card Component React本机元素中的边框

5 个答案: