React Native Flatlist не будет отображать ширину элемента динамически - PullRequest
Новая
       22

React Native Flatlist не будет отображать ширину элемента динамически

0 голосов
/ 28 мая 2018

Я пытаюсь создать интерфейс обмена сообщениями, используя плоский список и стиль пузырьков сообщений из пользовательского интерфейса nachos-ui, но у меня возникают проблемы с получением плоского списка для визуализации текстовых пузырьков различной ширины в зависимости от объема текста.Всякий раз, когда я впервые отправляю сообщение, пузырек кажется приличной ширины:

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>

Как получить плоский список для рендеринга каждого сообщения с динамическим размеромв зависимости от количества отправленного текста без изменения каких-либо предыдущих сообщений и без предопределенной максимальной ширины?

1 Ответ

0 голосов
/ 28 мая 2018

Проблема в вашем стиле FlatList:

style={{marginLeft: 280}}

Она "сжала" все ваши элементы справа, всегда с одинаковой шириной.

Aлучший способ - удалить этот marginLeft и выровнять пузырьки справа следующим образом:

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

...