如何在 React Native ios 中将阴影样式暴露在 ScrollView 容器之外？

Question

我创建了几张卡片，每张卡片都有阴影，希望使用 ScrollView 水平滚动它们。但是，我注意到由于 ScrollView 必须有一个有界高度，它会在与其他组件相邻时切断阴影（在下面的示例中，这些是文本组件）。

这是 ScrollView 发生的事情以及我希望通过 ScrollView 实现的图片：

https://i.stack.imgur.com/unekn.png

这是小吃的代码： https://snack.expo.io/SypSytICH

import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, View } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return (
    <SafeAreaView>
      <View style={{paddingTop: 100}}>
            <Text style={styles.text}>Above ScrollView</Text>
      </View>
      <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
        <View style={{...styles.card, ...styles.shadow}}>
          <View style={styles.friendImg}>
            <View></View>
          </View>
          <Text style={styles.friendText}>Markus Todd</Text>
        </View>
        <View style={{...styles.card, ...styles.shadow}}>
          <View style={styles.friendImg}>
            <View></View>
          </View>
          <Text style={styles.friendText}>Markus Todd</Text>
        </View>
        <View style={{...styles.card, ...styles.shadow}}>
          <View style={styles.friendImg}>
            <View></View>
          </View>
          <Text style={styles.friendText}>Markus Todd</Text>
        </View>
        <View style={{...styles.card, ...styles.shadow}}>
          <View style={styles.friendImg}>
            <View></View>
          </View>
          <Text style={styles.friendText}>Markus Todd</Text>
        </View>
        <View style={{...styles.card, ...styles.shadow}}>
          <View style={styles.friendImg}>
            <View></View>
          </View>
          <Text style={styles.friendText}>Markus Todd</Text>
        </View>
      </ScrollView>
      <View>
            <Text style={styles.text}>Below ScrollView</Text>
      </View>
      <View style={{paddingTop: 100}}>
        <Text style={styles.text}>Above</Text>
        <View style={{...styles.card, ...styles.shadow}}>
            <View style={styles.friendImg}>
              <View></View>
            </View>
            <Text style={{...styles.friendText}}>Markus Todd</Text>
        </View>
        <Text style={styles.text}>Below</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  shadow: {
      shadowColor: 'rgba(39, 52, 125, 0.17)',
      shadowOffset: {width: 0, height: 14},
      shadowRadius: 37,
      shadowOpacity: 1,
      boxShadow: '0 14px 37px 0 rgba(39, 52, 125, 0.17)',
  },
  card: {
      backgroundColor: 'rgba(255, 255, 255, 0.89)',
      borderRadius: 4.36,
      width: 98,
      height: 120,
      marginLeft: 11,
  },
  friendImg: {
      justifyContent: 'center',
      paddingTop: 16,
  },
});

Answer 1

overflow: visible

帮我解决了

如何在 React Native ios 中将阴影样式暴露在 ScrollView 容器之外？

How to expose shadow styling outside of ScrollView's container in React Native ios?

react-native

react-native-ios