Question

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

下面是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容器外部显示阴影样式？

1 个答案: