Реактивный FlatList прокрутить вниз для приложения чата

Question

Я создал приложение для чата, и для рендеринга сообщений используется flatlist. Но проблема пытается прокрутить до конца экрана каждый раз, когда страница загружается, но это не удается сделать. Я пробовал перевернутый реквизит, но ничего не произошло, только список был перевернут.

Даже играл с ref, чтобы сделать автопрокрутку вниз, но ничего не произошло.

<FlatList
  ref="flatList"
  onContentSizeChange={() =>
    this.refs.flatList.scrollToEnd()}
  contentContainerStyle={{
    marginBottom:
      verticalScale(200)
  }}
  style={styles.list}
  data={this.state.messages}
/>

Как сделать так, чтобы прокрутить его до конца экрана или прокрутить до последнего индекса сообщения при визуализации?

(ОБНОВЛЕНИЕ)

ЭТО БЫЛО ПРОБЛЕМА С компонентом <Content/>, который я использовал, который принадлежит native-base. После удаления и замены на <View/> он работает отлично. Кроме того, для приложения, основанного на чате, inverted опора в Flatlist - это способ правильной реализации.

Я добавил способ, которым мне удалось прокрутить ответ ниже. Если вы просто хотите, чтобы ваше приложение отображало последний элемент в списке и оставалось там, вы можете использовать inverted

Answer 1

Вы должны использовать ref следующим образом:

export default class MyAwesomeComponent extends React.Component {
  FlatListRef = null; // add a member to hold the flatlist ref

  render() {
    return (
      <FlatList
        ref={ref => (this.FlatListRef = ref)} // assign the flatlist's ref to your component's FlatListRef...
        onContentSizeChange={() => this.FlatListRef.scrollToEnd()} // scroll it
        contentContainerStyle={{marginBottom: verticalScale(200)}}
        style={styles.list}
        data={this.state.messages}
      />
    );
  }
}

Answer 2

prueba esto

return (
      <View style={{flex: 1}}>
        <KeyboardAvoidingView
          behavior="padding"
          style={styles.keyboard}
          keyboardVerticalOffset={height - 1000}>
          <FlatList
            ref={ref => (this.FlatListRef = ref)}
            onContentSizeChange={() => this.FlatListRef.scrollToEnd()} // scroll it
            // contentContainerStyle={{marginBottom: verticalScale(200)}}
            // keyboardShouldPersistTaps='always'
            style={styles.list}
            extraData={this.state}
            data={this.state.messages}
            keyExtractor={item => {
              return item.id;
            }}
            renderItem={e => this._renderItem(e)}
          />
          <View style={styles.input}>
            <TextInput
              // style={{flex: 1}}
              value={msg}
              placeholderTextColor="#000"
              onChangeText={msg => this.setState({msg: msg})}
              blurOnSubmit={false}
              onSubmitEditing={() => this.send()}
              placeholder="Escribe el mensaje"
              returnKeyType="send"
            />
          </View>
        </KeyboardAvoidingView>
      </View>
    );

Answer 3

Вот как я это решил:

export default class Test extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    setTimeout(() => {
      this.FlatListRef.scrollToEnd();
    }, 1500);
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={[1, 2, 3, 4, 5, 6, 7, 8]}
          ref={(ref) => (this.FlatListRef = ref)}
          renderItem={({ item }) => {
            return (
              <View
                style={{
                  height: 140,
                  width: 400,
                  backgroundColor: "yellow",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <Text>{item}</Text>
              </View>
            );
          }}
        />
      </View>
    );
  }

}

Answer 4

Вы можете использовать метод Javascript, чтобы просмотреть свои сообщения с конца

messages.reverse()

Answer 5

scrollToListPosition = (index) => {
  const itemOffset = this.getItemOffset(index)
  this.flatListRef.scrollToOffset({ animated: false, offset: itemOffset })
}

getItemOffset = (index) => {
  let heightsum = 0
  for (i = 0; i < index; i++) {
    heightsum = heightsum + this.itemHeight[i]
  }
  return heightsum
}


render(){
  return (
    <FlatList
      ref={(ref) => { this.flatListRef = ref; }}
      data={postList}
      keyExtractor={(item, index) => item._id}
      horizontal={false}
      extraData={this.state}
      keyboardShouldPersistTaps='always'
      refreshing={this.props.isRefreshing}
      onRefresh={this.handleRefresh}
      onEndReached={this.handleLoadMore}
      getItemLayout={(data, index) => (
        { length: this.getLength(index), offset: this.getLength(index) * index, index }
      )}
      renderItem={({ item, index }) => {
        return (
          <View onLayout={(event) => {
            var { height } = event.nativeEvent.layout;
            this.itemHeight[index] = height
          }}
          >
            <ListCommon
              key={index}
              item={item}
              index={index}
              parentFlatList={this}
              data={item}
              instance={this.props.commanAction}
              tag={this.state.tag}
              changeRoute={this.props.changeRoute}
            />
          </View>
        );
      }}
    />
  )
}

getLength = (index) => {
  if (this.itemHeight[index] === undefined) {
    return 0;
  }
  return this.itemHeight[index]
}