我不明白为什么borderRadius 不能在flatList 组件上工作答案

【问题标题】：I can't figure out why borderRadius is not working on a flatList component我不明白为什么borderRadius 不能在flatList 组件上工作
【发布时间】：2020-01-17 06:32:05
【问题描述】：

我在 react native 中进行聊天，这是通过使用 FlatList 组件来显示消息来完成的。我正在尝试设置消息的样式，使它们是圆形的，但 borderRadius 不起作用（左、右、上或下）。我发现了这个：borderRadius not applied on FlatList，但即使在我的代码中添加了overflow: 'hidden'，我也无法让它显示除矩形之外的任何内容。

代码：

render(){
        return(
              <View style={styles.container}>
                  <View style={styles.messages}>
                      <FlatList
                          data={this.state.messages}
                          renderItem={({ item }) =>    this.renderTextItem(item)}
                          keyExtractor={(item, index) => index.toString()}
                          extraData={this.state.messages}
                      />
                  </View>
                  <KeyboardAvoidingView
                    style={styles.inputContainer}
                    behavior={(Platform.OS === 'ios') ? "padding" : null} enabled
                    keyboardVerticalOffset={Platform.select({ios: 80, android: 500})}
                  >
                        <TextInput
                            onChangeText={(text) => this.setState({userInput: text})}
                            value={this.state.userInput}
                            style={styles.textInput}
                            editable={this.state.inputEnabled}
                            placeholder={'Type something'}
                            autoFocus={true}
                            multiline={true}
                            onSubmitEditing={this.handleTextSubmit.bind(this)}
                        />
                  </KeyboardAvoidingView>
              </View>

          )
    }

样式：

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.WHITE
    },
    messages: {
        flex: 1,
        marginTop: 20,
        overflow: "hidden"
    },
    botMessages: {
        color: colors.BLACK,
        backgroundColor: '#EEE',
        padding: 10,
        borderBottomLeftRadius: 90,
        borderBottomRightRadius: 90,
        borderTopLeftRadius: 90,
        marginBottom: 0,
        borderTopRightRadius:90,
        alignSelf: 'flex-start',
        bottom: 23,
        textAlign: 'left',
        width: '75%'
    },
    userMessages: {
        backgroundColor: colors.CHATREPLY,
        color: colors.WHITE,
        padding: 10,
        marginBottom: 10,
        marginRight: 5,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 0,
        borderTopLeftRadius: 80,
        borderTopRightRadius: 20,
        width: '45%',
        alignSelf: 'flex-end',
        textAlign: 'left'
    },
    responseContainer : {
        flexDirection: 'row',
        marginTop: 20,
        marginBottom: 0,
    },
    inputContainer: {
        flex: 1/7,
        flexDirection: 'row',
        backgroundColor: '#FFF',
        borderTopWidth:1,
        borderColor: "#c9c9c9"
    },
    textInput: {
        paddingLeft: 20,
        marginBottom: 35,
    },
})

添加renderTextItem()

renderTextItem(item) {
        let style,
            responseStyle
        if (item.from === 'bot') {
            style = styles.botMessages
            responseStyle = styles.responseContainer
        } else {
            style = styles.userMessages
            responseStyle = {}
        }
        return (
            <View style={responseStyle}>
                <Text style={style}>{item.msg}</Text>
            </View>
        )
    }

【问题讨论】：

您想为整个平面列表或其中的每个项目赋予边框半径？
也可以给我们看一下函数renderTextItem的代码
@Vagtse 添加功能
@KaranMehta 只是项目（即来自用户和机器人的消息）
你能加一个minimal, reproducible example吗？我这里没有准备好 React 样板，而且您的代码似乎不完整，因为快速粘贴到 Stackblitz 会引发很多错误。尽管如此，我对错误在哪里有预感，但想在我发布可能不正确的答案之前亲眼看看。

标签： react-native react-native-flatlist react-native-stylesheet

【解决方案1】：

试试这个： style={{borderRadius:6,overflow: 'hidden'}}

【讨论】：

overflow: 'hidden' 在这种情况下起到了作用。它将剪辑溢出的图像。

【解决方案2】：

我认为你在使用borderRadius时需要使用borderWidth。

【讨论】：

我试过这样做，但它只是增加了宽度而不影响任何半径