React Native Flatlist 不会动态呈现项目的宽度

Question

我正在尝试使用 ui 工具包 nachos-ui 中的平面列表和消息气泡样式创建消息传递界面，但我无法让平面列表呈现不同宽度的基于文本量的文本气泡。第一次发消息的时候，气泡的宽度好像还不错:

然而，每当我发送另一条消息时，尽管在这些图片中很难看到，它会改变前一条消息的宽度并将新消息压缩到似乎最大宽度

这是我的平面列表代码：

<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>

如何让平面列表根据提交的文本量以动态大小呈现每条消息，而不更改任何以前的消息，并且没有预先确定的最大宽度？

Answer 1

问题出在您的 FlatList 样式上：

style={{marginLeft: 280}}

它 "compressed" 您所有的项目都在右边，宽度始终相同。

更好的方法是移除这个 marginLeft 并将右边的气泡与 :

对齐

<FlatList style= {{ alignItems: 'flex-end' }} ...>

React Native Flatlist 不会动态呈现项目的宽度

React Native Flatlist won't render item's width dynamically

javascript

css

react-native

react-native-flatlist