为什么我在 React Native 中的 Ref 不起作用？答案

【问题标题】：Why is my Ref in React Native not working?为什么我在 React Native 中的 Ref 不起作用？
【发布时间】：2020-03-26 13:44:39
【问题描述】：

我正在使用 React Native 构建聊天消息页面。

我有以下代码：

import React from 'react';
import {View,ScrollView,Text} from 'react-native';
import {Button} from 'native-base';

export default class MatchContact extends React.Component {
  constructor(props){
  super(props);
  this.scrollRef = React.createRef();
}

state = {
  messages: ['message1','message2','message3','message4']
}

handleScroll(){
  this.scrollRef.scrollToEnd()
}

render(){
  return(
    <View>
      <Button onPress={()=>this.handleScroll()}>
        <Text> Scroll To Bottom </Text>
      </Button>
      <ScrollView ref={this.scrollRef}>
         {this.state.messages.map(message => (
             <Text> {message} <Text/>
          ))}
      </ScrollView>
     </View>
  )
}

所以，当我按下按钮“滚动到底部”时，我希望 ScrollView 滚动到页面末尾，但出现错误：

TypeError：_this5.scrollRef.scrollToEnd 不是函数。（在'_this5.scrollRef.scrollToEnd()'中，'_this5.scrollRef.scrollToEnd'未定义）

【问题讨论】：

尝试使用this.scrollRef.current.scrollToEnd()而不是this.scrollRef.scrollToEnd()
我在下面回答了你的问题。我将不胜感激，并将我的答案标记为已接受的答案或任何其他反馈。谢谢

标签： reactjs react-native redux react-ref

【解决方案1】：

尝试如下获取 ref

<ScrollView  
keyboardShouldPersistTaps="handled"
ref={(ref) => this.scrollView = ref}>

【讨论】：

【解决方案2】：

基本上你有两个选择：

选项1：

使用this.scrollRef.current：

handleScroll(){
  this.scrollRef.current.scrollToEnd()
}

或

选项2：

<ScrollView ref={ref => this.scrollRef = ref}>
....
</ScrollView>

【讨论】：