borderRadius不适用于FlatList

Question

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

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

我尝试了以下操作：

1. 将borderRadius = {6}设置为FlatList中的参数，而不是样式（例如。
2. 将FlatList包含在视图中，然后将style = {{borderRadius：6，溢出：'hidden'}}应用于视图
3. 将我的ImageBackground设置为style = {{borderRadius：6，溢出：'hidden'}}，其中包含FlatList和其他UI元素
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

重新创建结构，对我来说，可以很好地处理边界半径 小吃链接：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>

Answer 2

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