Question

我在很多视图和按钮上都使用阴影，它们可以正常工作。但是它不能在具有zIndex的绝对位置FlatList的自动完成列表元素上工作（我删除了zIndex，也删除了位置“ absolute”，并且阴影仍然不显示）。这是针对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的每个容器。当它可用于我的其他按钮和视图时，为什么不起作用？

Answer 1

在FlatList上，阴影不起作用。但它适用于View。我将FlatList包裹在样式视图中：

RcppExports

反应本机阴影不显示

1 个答案: