Question

我制作了一个聊天应用程序，并使用呈现列表的方式来呈现消息。但是，尝试在每次加载页面时滚动到屏幕末尾的问题，但这样做没有成功。我尝试过倒置道具，但是什么也没发生，只有清单倒了。

即使使用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

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 4

您可以使用Javascript方法反向显示来自结尾的消息

messages.reverse()

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

}

将本机FlatList滚动到底部以进行聊天

5 个答案: