我在我的很多 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 时,为什么它不起作用?
最佳答案
阴影在 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>
关于css - React Native 阴影不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57437099/