react-native - 设计功能 React Native

Question

我希望用户个人资料图片在模态上一半，在模态外一半

我试过这个

                                    height: PROFILE_DIAMETER,
                                    width: PROFILE_DIAMETER,
                                    borderRadius: PROFILE_DIAMETER / 2,
                                    marginLeft: 20,
                                    top: -20,
                                    flex: 0,
                                    resizeMode: 'cover',
                                    overflow: 'hidden',
                                    transform: [{translateY: translateImageY()}, {scale: imgScale()}, {translateX: translateImageX()}]
                                }}

想实现这个设计功能来react-native

标签： react-native

Answer 1

<Image style={{width: '100%', zIndex: -1}} source={require('../assets/capa.png')} />
    <View style={{
        width: '90%',
        backgroundColor: 'white',
        alignSelf: 'center',
        borderRadius: 10,
        paddingBottom: 20
    }}>
        <View style={{
            marginTop: -100
        }}>
            <Avatar
                rounded
                size='xlarge'
                containerStyle={{ alignSelf: "center", marginTop: 20 }}
                overlayContainerStyle={{
                    borderWidth: 1,
                    borderColor: '#00a9cf',
                    backgroundColor: 'white'
                }}
                source={{
                    uri:
                        'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
                }}
            />
            <Text style={{ color: '#383941', fontSize: 22, alignSelf: "center", fontFamily: 'PTSans-Bold' }}>{this.state.name}</Text>
            <Text style={{ color: '#79787b', fontSize: 15, alignSelf: "center", fontFamily: 'PTSans-Italic' }}>{this.state.profession}</Text>
        </View>
    </View>

观察 zindex -1 的图像和包含负 marginTop 的头像的视图