borderRadius 未应用于 FlatList [英] borderRadius not applied on FlatList

问题描述

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

I have a FlatList that gets displayed whenever someone inputs text in a TextInput. The issue that I'm facing is that borderRadius is applied on iOS, but not on Android (see what I mean at https://gitlab.com/narcis11/jobzy/uploads/2377b0617461a1ce35e3ae249b28c93c/rounded-edges.png ). The screenshot is from a Google Pixel emulator running API 28.

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

I am running on Expo 33, which is based on 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.

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

Needless to say that neither of these solutions solved my problem.

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

This is my FlatList, which sits in an 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 上是圆角的.然而，他们不是.

I expect the corners of the FlatList to be rounded on Android. However, they are not.

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

Any help will be appreciated. :)

推荐答案

我终于通过将 contentContainerStyle={{borderRadius: 6, overflow: 'hidden'}} 添加到平面列表.

I finally managed to get it working by adding contentContainerStyle={{borderRadius: 6, overflow: 'hidden'}} to the FlatList.

这篇关于borderRadius 未应用于 FlatList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！