代码之家  ›  专栏  ›  技术社区  ›  stor314

react本机flatlist不会动态呈现项的宽度

  •  1
  • stor314  · 技术社区  · 6 年前

    我正在尝试使用用户界面工具包nachos用户界面中的“平面列表”和“消息气泡”样式创建消息接口,但我无法让平面列表根据文本量呈现不同宽度的文本气泡。每当我第一次发送消息时,气泡似乎是一个合适的宽度:

    enter image description here

    然而,每当我发送另一条消息时,尽管在这些图片中很难看到,但它会更改前一条消息的宽度,并将新消息限制为最大宽度。

    enter image description here

    这是我的扁平列表代码:

    <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根据提交的文本量以动态大小呈现每个消息,而不更改任何以前的消息,也不更改预定的最大宽度?

    1 回复  |  直到 6 年前
        1
  •  1
  •   sanjar    6 年前

    style={{marginLeft: 280}}

    它“压缩”了你右边所有的物品,总是以相同的宽度。

    一个更好的方法是去掉左边的边缘,并将右边的气泡与以下内容对齐:

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