在原生卡中启用溢出

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 不支持溢出。有很多未解决的问题。检查其中一些 here and here.

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

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

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

这是我从 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,
  }
}

这是我得到的输出。

Answer 2

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet,TextInput,Dimensions,Image } from 'react-native';
import ButtonRoundBorder from '../components/ButtonRoundBorder';


const window = Dimensions.get('window')
// create a component
class Login extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Image style={{width:window.width,height:window.height,position:'absolute'}} source={require('../images/bg2.jpeg')}/>
                <View  style={styles.overlayImageStyle} >
                    <Image style={{flex:1,borderRadius:80}} resizeMode={'contain'} source={require('../images/profile.jpg')} />
                </View>
                <View   style={styles.cardStyle}>
                    <View style={styles.insideCard}>
                        <Text style={{fontWeight:'bold',fontSize:20,alignSelf:'center'}}>Login</Text>
                        <TextInput style={[styles.textInputStyle,{marginTop:30}]} underlineColorAndroid='#000000' placeholder='Enter Email' />
                        <TextInput style={[styles.textInputStyle,{marginTop:20}]} underlineColorAndroid='#000000'  placeholder='Enter Password' />
                        <ButtonRoundBorder style={{marginTop:40}} title='Login'/>
                    </View>
                </View>
            </View>
            
        );
    }   
}                               


const styles = StyleSheet.create({ 

    container:{
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'transparent',
    },
    overlayImageStyle:{
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        width: 100,
        height: 100,
        borderRadius: 100/2,
        backgroundColor: 'white',
        top:50,
        shadowColor: '#000', 
        // position: 'absolute',row
        // shadowOpacity: 0.2, 
        // shadowRadius: 10,
        elevation: 7,
    },
    cardStyle:{
        // alignItems: 'center',
        // justifyContent: 'center',
        // position: 'absolute',
        top: 80,
        width: window.width - 40,
        height: window.height - 200,
        borderRadius: 8,
        backgroundColor: 'white',
        // backgroundColor: '#7E57C2',
        shadowColor: '#000',
        elevation: 5,
    },
    insideCard:{
        top: 80,
        alignContent: 'center',
        justifyContent: 'center',   
        flexDirection:'column',
        
    },
    textInputStyle:{
        width:300,
        height:40,
        alignSelf:'center',
        
    }

});

//make this component available to the app
export default Login;

here is the link for screenshot

在原生卡中启用溢出

Enable overflow in native-base cards

css

react-native

native-base