borderRadius 未应用于 FlatList

Question

我有一个 FlatList，每当有人在 TextInput 中输入文本时就会显示它。我面临的问题是 borderRadius 应用于 iOS，但不适用于 Android（请参阅我的意思https://gitlab.com/narcis11/jobzy/uploads/2377b0617461a1ce35e3ae249b28c93c/rounded-edges.png）。屏幕截图来自运行 API 28 的 Google Pixel 模拟器。

我在 Expo 33 上运行，它基于 React Native 0.59.8。

我尝试了以下方法：

1. 将 borderRadius={6} 设置为 FlatList 中的参数，而不是样式（例如 .
2. 将 FlatList 包含在视图中并将 style={{borderRadius: 6, overflow: 'hidden'}} 应用于视图
3. 将 style={{borderRadius: 6, overflow: 'hidden'}} 设置为包含 FlatList 和其他 UI 元素的 ImageBackground
4. 将 borderBottomLeftRadius、borderBottomRightRadius、borderTopLeftRadius、borderTopRightRadius 设置为 6。

不用说，这些解决方案都没有解决我的问题。

这是我的 FlatList，它位于 ImageBackground 中：

<ImageBackground style={styles.bkgImage} source={require('../assets    /homepage_background.jpg')}>
        <Text style={styles.header}>{i18n.t('appName')}</Text>
        <Text style={styles.descText}>{i18n.t('homepage.header1')}{'\n'}{i18n.t('homepage.header2')}</Text>
        <TextInput 
            style={styles.jobTextInput}
            value={this.state.jobInputValue}
            placeholder={i18n.t('homepage.jobInput')}
            onChangeText={(jobInputValue) => this.setState({jobInputValue}, this.checkJobsDropdown(jobInputValue))}/>
                <FlatList
                data={this.state.jobsList}
                style={this.state.showJobsDropdown ? styles.jobsDropdownStyle : styles.dropdownHiddenStyle}
                renderItem={({ item }) => (
                    <ListItem
                        title={item}
                        containerStyle={{paddingBottom: -4}}
                        titleProps={{style:styles.dropdownItemStyle}}
                        onPress={() => this.setState({jobInputValue: item}, this.hideJobsDropdown())}
                    />
                )}
                keyExtractor={item => item}
                />

这是应用于它的样式：

jobsDropdownStyle: {
    width: 300,
    height: 140,
    ...Platform.select({
        ios: {
          marginTop: 240
        },
        android: {
            marginTop: 250
        }
      }),
    borderRadius: 6,
    zIndex: 1,
    position:'absolute'
}

我希望 FlatList 的角在 Android 上是圆角的。然而，他们不是。

任何帮助将不胜感激。:)

Answer 1

我终于设法通过添加contentContainerStyle={{borderRadius: 6, overflow: 'hidden'}}到 FlatList使其工作。