反应本机滚动到底部答案

【问题标题】：React Native Scroll To Bottom反应本机滚动到底部
【发布时间】：2018-05-04 01:41:55
【问题描述】：

当我点击 react native 中的输入时，我想将列表向下滚动到底部。

这是我的代码。

render() {
    return (
      <View style={styles.container}>
        <View style={styles.commentListWrapper}>
          <ScrollView>
            <Animated.View>
              <PostProfileBar
                profile={this.state.post.author}
                timeAgo={this.state.post.timeAgo}
              />

              <ClickableImage
                source={{ uri: this.state.post.postImage }}
                height={height * (3 / 10)}
                width={width}
                onPress={() => alert("Image Clicked")}
              />
            </Animated.View>

            <CommentFlatList
              data={this.state.data}
              refreshing={this.state.refreshing}
            />
          </ScrollView>
        </View>

        <View
          style={[
            styles.commentInputWrapper,
            { flex: this.state.commentBoxFlex }
          ]}
        >
          <CommentInput
            iconName="upload"
            placeholder="Type Comment"
            isFocused={true}
            fontSize={this.state.comment.value.length > 0 ? 16 : 20}
            value={this.state.comment.value}
            multiline={true}
            onChangeText={value => this.onChangeComment(value)}
            onPress={() => this.uploadComment()}
            invalidInput={styles.invalidInput}
            valid={this.state.comment.valid}
            touched={this.state.comment.touched}
            disabled={!this.state.comment.valid}
          />
        </View>
      </View>
    );
  }

现在，当我点击评论输入时，我想将列表向下滚动到底部。我怎样才能做到这一点？

【问题讨论】：

标签： react-native

【解决方案1】：

在 2020 年使用新的 hooks API，新的方法是：创建参考：

const scrollViewRef = useRef();

将它与滚动视图相关联：

<ScrollView ref={scrollViewRef}>

然后调用它：

 scrollViewRef.current.scrollToEnd({animated: true})

【讨论】：

【解决方案2】：

您可以在ScrollView 上获得ref：

<ScrollView
  ref={(view) => {
    this.scrollView = view;
  }}
>

然后在<CommentInput>的onPress方法中调用scrollToEnd：

onPress={() => {
  this.scrollView.scrollToEnd({ animated: true }); 
  this.uploadComment(); 
}}

【讨论】：