borderRadius not applied on FlatList

问题

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.

I am running on Expo 33, which is based on React Native 0.59.8.

I've tried the following:

Setting borderRadius={6} as a parameter in the FlatList, not in the style (e.g. .
Enclosing the FlatList in a View and applying style={{borderRadius: 6, overflow: 'hidden'}} to the view
Setting style={{borderRadius: 6, overflow: 'hidden'}} to my ImageBackground that encloses the FlatList and other UI elements
Setting borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius to 6.

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

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}
                />

And this is the style applied to it:

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

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

Any help will be appreciated. :)

回答1:

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

回答2:

Recreated the structure and for me its working fine with border radius Snack link: https://snack.expo.io/@msbot01/disrespectful-chocolate

<View style={styles.container}>
        <ImageBackground source={{uri: 'https://artofislamicpattern.com/wp-content/uploads/2012/10/3.jpg'}} style={{width: '100%', height: '100%',opacity:0.8, alignItems:'center', justifyContent:'center'}}>
          <FlatList
            data={[{key: 'a', value: 'Australia'}, {key: 'b', value:'Canada'}]}
            extraData={this.state}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
            style={{backgroundColor:'white', width:'90%', borderRadius:10, margin:10, marginBottom:10, paddingTop:10, paddingBottom:10, paddingLeft:10, position:'absolute', zIndex: 1}}
          />
        </ImageBackground>
      </View>

来源：https://stackoverflow.com/questions/57087436/borderradius-not-applied-on-flatlist

标签

react-native

react-native-android