react-native - 海拔无法正常 react native

Question

我试图为我的自定义卡片组件提供阴影，但阴影会减少 View ，如下所示:

这是我的代码

import React from 'react'
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native'

const { width } = Dimensions.get('window')

export default function CardCus() {
    return (
        <View style={{
            justifyContent: 'center', alignItems: 'center', padding: 10
        }}>

            <View style={styles.container}>
                <View style={{ width: 110, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, }}>
                    <Image style={{ width: '100%', height: '100%', borderTopLeftRadius: 10, borderBottomLeftRadius: 10 }} source={{ uri: 'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' }} />
                </View>
                <View style={{ margin: 10, padding: 5 }}>
                    <Text style={styles.title}>Title</Text>
                    <Text>Separator</Text>
                    <Text>Title</Text>
                    <Text>Title</Text>
                </View>
            </View>

        </View>
    )
}

const styles = StyleSheet.create(
    {
        container: {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.5,
            shadowRadius: 2,
            elevation: 2,
            flexDirection: 'row',
            borderRadius: 10,
            borderColor: 'black',
            borderWidth: 1,
            height: 110,
            width: width - 10,

        },
        title: {
            fontWeight: 'bold'
        }
    }
)

我尝试了许多不同的样式设置，但都不起作用。有办法解决这个问题吗？提前致谢。

Answer 1

与您的问题相关，一开始很难理解。

我刚刚将属性 zIndex 和 backgroundColor 添加到容器样式，并增加了 elevation 的值，现在看起来更好了。还提高了可读性。

请参阅下面改进后的代码中的注释:

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

export default function CardCus() {
  const imgUri =
    'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940';

  return (
    <View style={styles.main}>
      <View style={styles.container}>
        <View style={styles.imageContainer}>
          <Image style={styles.image} source={{ uri: imgUri }} />
        </View>
        <View style={styles.textContainer}>
          <Text style={styles.title}>Title</Text>
          <Text>Separator</Text>
          <Text>Title</Text>
          <Text>Title</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
    elevation: 10, // changed to a greater value
    flexDirection: 'row',
    borderRadius: 10,
    borderColor: 'black',
    borderWidth: 1,
    height: 110,
    width: Dimensions.get('window').width - 10,
    zIndex: 99, // added zIndex
    backgroundColor: 'white', // added a background color
  },
  title: {
    fontWeight: 'bold',
  },
  imageContainer: {
    width: 110,
    borderTopLeftRadius: 10,
    borderBottomLeftRadius: 10,
    backgroundColor: 'white',
  },
  image: {
    width: '100%',
    height: '100%',
    borderTopLeftRadius: 10,
    borderBottomLeftRadius: 10,
  },
  textContainer: {
    margin: 10,
    padding: 5,
    backgroundColor: 'white',
  },
  main: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
  },
});

您可以调整值以使阴影更暗。它看起来是这样的: