react-native FlatList 滚动到底部的聊天应用程序

Question

我制作了一个聊天应用程序，并使用平面列表来呈现消息。但是问题是每次加载页面时都尝试滚动到屏幕末尾，但它失败了。我试过倒置的道具，但什么也没发生，只有列表倒置了。

甚至使用 ref 让它自动滚动到底部，但什么也没发生。

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

如何让它在渲染时滚动到屏幕底部或滚动到消息的最后一个索引？

（更新）

这是我使用的属于 native-base 的 <Content/> 组件的问题。在删除并用<View/> 替换它后，它工作得非常好。 此外，对于基于聊天的应用，Flatlist 中的 inverted 属性是正确实现的方法。

我在下面的答案中添加了我设法滚动的方式。如果您只是希望您的应用显示列表中的最后一项并停留在那里，您可以使用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

您可以使用 Javascript 方法反向显示您的消息从头开始

messages.reverse()

Answer 4

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

Answer 5

我是这样解决的：

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>
    );
  }

}