Question

我正在使用本机聊天，这是通过使用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>
        )
    }

Answer 1

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

Answer 2

尝试一下： style={{borderRadius:6,overflow: 'hidden'}}

我不知道为什么borderRadius无法在flatList组件上工作

2 个答案: