Question

当我点击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>
    );
  }

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

Answer 1

您可以在ref上获得ScrollView：

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

然后在onPress的{{1}}方法中调用scrollToEnd：

<CommentInput>

Answer 2

在2020年，通过新的hooks API，新的实现方法是：创建参考：

const scrollViewRef = useRef();

将其关联到滚动视图：

<ScrollView ref={scrollViewRef}>

然后调用：

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

React Native Scroll To Bottom

2 个答案: