Я не могу понять, почему borderRadius не работает на компоненте flatList - PullRequest
Новая
       39

Я не могу понять, почему borderRadius не работает на компоненте flatList

1 голос
/ 17 января 2020

Я веду чат в собственном режиме, который выполняется с помощью компонента FlatList для отображения сообщений. Я пытаюсь стилизовать сообщения так, чтобы они были круглыми, но borderRadius не работает (влево, вправо, сверху или снизу). Я нашел это: borderRadius не применяется к 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>
        )
    }

1 Ответ

0 голосов
/ 17 января 2020

Я думаю, вам нужно использовать borderWidth при использовании borderRadius.

...