css - 在原生卡中启用溢出

Question

我在网站中有一个如下所示的组件:

Regular card

它基本上是一个内部有图像的 div，但图像的 margin-top 为 -50，因此它会溢出卡片。

我想用 react-native 和 native-base 完成同样的事情。相关代码如下:

    render() {
       return (
          <View style={styles.container}>
            <Card>
                <CardItem style={{ marginTop: -50, justifyContent: 'center' }}>
                    <Image style={styles.image} source={{ uri: this.state.band.imageComponent.link }} />
                </CardItem>
            </Card>
         </View>
       )
    }

const styles = StyleSheet.create({
   container: {
    flex: 1,
    marginTop: 150
   },
   image: {
    width: 150,
    height: 150,
   )

结果是这样的: React-native card

如您所见，图片在顶部被截断。我怎样才能让图像溢出并让它像我的第一张图像一样覆盖在卡片上？

Answer 1

Android 不支持溢出。有很多 Unresolved 问题。检查其中一些 here和 here .

这是一个 npm package这显然解决了您可以尝试的问题。

否则，您可以使用我在此 medium post 上找到的解决方法.

根据您的图像，您必须将图像和容器包装在另一个 View 中作为 sibling ，然后绝对定位它们。

这是我从 post 中稍微调整过的代码.您可以根据您的 Card 和 CardItem 样式替换 View。

<View style={styles.container}>
  <View style={styles.cardSection1}>
    <Image style={styles.image} source={{ uri: 'https://imgplaceholder.com/420x320/ff7f7f/333333/fa-image' }} />
  </View>
  <View style={styles.cardSection2}>
  </View>
</View>

const styles = {
  container: {
   flex: 1,
   backgroundColor: 'grey',
   alignItems: 'center'
  },
  image: {
   width: 150,
   height: 150,
  },
  cardSection1: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    width: 100,
    height: 100,
    borderRadius: 50 / 2,
    zIndex: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.2,
    shadowRadius: 10,
    elevation: 7,
  },
  cardSection2: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    top: 25,
    width: 300,
    height: 150,
    borderRadius: 8,
    backgroundColor: 'white',
    zIndex: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.2,
    shadowRadius: 10,
    elevation: 5,
  }
}

这是我得到的输出。