css - React Native 阴影不显示

Question

我在我的很多 View 和按钮上使用了阴影，它们工作正常。但它不适用于这个自动完成列表元素，它是一个绝对定位的 FlatList 和一个 zIndex(我删除了 zIndex，也删除了位置“绝对”，但阴影仍然不显示)。这是针对 iOS 的。我没有在 Android 上试过。:

代码:

let PresentationalLocationView = (props: PresentationalLocationViewProps) => {
  return (
    <View>
      <Input
        isValid={props.isValid}
        label={'Shop / Restaurant'}
        value={props.value}
        onChangeText={(text) => props.onChangeText(text)}
        deleteText={() => {
          props.onChangeText('')
          props.updateLocationAutocompletePlace({})
        }}
        placeholder={props.placeholder}
      />
      <FlatList
        keyboardShouldPersistTaps={true}
        data={props.autocompleteResults.predictions}
        renderItem={(listItemValue) =>
          renderAutocompleteItem(props, listItemValue)
        }
        style={{
          ...autocompleteStyle.listView(props),
          ...Shadows.shadedSmall,
          backgroundColor: 'white'
        }}
      />
    </View>
  )
}

const renderAutocompleteItem = (
  props: PresentationalLocationViewProps,
  listItemValue: { item: { description: string, place_id: string } }
) => (
  <View style={{ ...Shadows.shadedSmall, backgroundColor: 'white' }}>
    <TouchableOpacity
      onPress={() => {
        props.onListItemSelect(listItemValue.item)
      }}
      style={{
        height: 40,
        display: 'flex',
        justifyContent: 'center',
        ...Shadows.shadedSmall,
        backgroundColor: 'white'
      }}>
      <Text style={styles.label} numberOfLines={1}>
        {listItemValue.item.description}
      </Text>
    </TouchableOpacity>
  </View>
)

export const shadedSmall = {
  elevation: 3,
  shadowColor: Colors.black,
  shadowOffset: {
    width: 0,
    height: 3
  },
  shadowRadius: 2,
  shadowOpacity: 0.2
}

如您所见，我只是试图将阴影应用于图像中那个白色 FlatList 的每个容器。当它适用于我的其他按钮和 View 时，为什么它不起作用？

Answer 1

阴影在 FlatList 上不起作用。但它适用于 View。我将 FlatList 包裹在样式化的 View 中:

  <View
    style={{
      elevation: 3,
      shadowColor: Colors.black,
      shadowOffset: {
        width: 0,
        height: 3
      },
      shadowRadius: 2,
      shadowOpacity: 0.2,
      ...autocompleteStyle.listView(props)
    }}>
    <FlatList
      keyboardShouldPersistTaps={true}
      data={props.autocompleteResults.predictions}
      renderItem={(listItemValue) =>
        renderAutocompleteItem(props, listItemValue)
      }
    />
  </View>