我正在尝试使用用户界面工具包nachos用户界面中的“平面列表”和“消息气泡”样式创建消息接口,但我无法让平面列表根据文本量呈现不同宽度的文本气泡。每当我第一次发送消息时,气泡似乎是一个合适的宽度:
然而,每当我发送另一条消息时,尽管在这些图片中很难看到,但它会更改前一条消息的宽度,并将新消息限制为最大宽度。
这是我的扁平列表代码:
<FlatList
data={this.state.messages}
style={{marginLeft: 280}}
ref={ref => this.flatList = ref}
onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
onLayout={() => this.flatList.scrollToEnd({animated:true})}
keyExtractor = {item => item.timestamp}
renderItem={({item}) => <Bubble style={{marginTop: 20}} color="#FFC800"
>{item.contents}</Bubble>}
/>
此外,整个组件的代码可能有助于诊断问题:
<KeyboardAvoidingView style={styles.container}
behavior="padding"
keyboardVerticalOffset={64}>
<KeyboardAvoidingView style={styles.inputContainer}>
<FlatList
data={this.state.messages}
style={{marginLeft: 280}}
ref={ref => this.flatList = ref}
onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
onLayout={() => this.flatList.scrollToEnd({animated:true})}
keyExtractor = {item => item.timestamp}
renderItem={({item}) => <Bubble style={{marginTop: 20}} color="#FFC800"
>{item.contents}</Bubble>}
/>
<View style={{flexDirection:'row', backgroundColor: 'transparent'}}>
<Input
containerStyle={{marginVertical: 10, width:300, marginLeft: 20}}
inputStyle={styles.textInput}
keyboardAppearance="dark"
placeholder=""
autoCorrect={false}
onChangeText={(message) => { this.setState({message})}}
value={this.state.message}
/>
<Button
buttonStyle={{borderRadius: 25, marginTop: 40, marginLeft: 10, paddingVertical: 5, backgroundColor: "#9214FF"}}
icon={{name: 'arrow-up', type: 'feather', color:'white'}}
onPress={()=>{Keyboard.dismiss; this.onPressButton()}}
title=""/>
</View>
</KeyboardAvoidingView>
</KeyboardAvoidingView>
如何让Flatlist根据提交的文本量以动态大小呈现每个消息,而不更改任何以前的消息,也不更改预定的最大宽度?