React Native iOS：TextInput自动插入文本后滚动到底部问题

这个场景我之前也处理过，在RN 0.53.3版本里，要实现点击按钮添加文本后让TextInput自动滚到底部，核心是要获取TextInput的实例引用，并在状态更新完成后触发滚动——因为setState是异步操作，直接滚动会拿不到最新的内容高度，自然没法滚到底部。

下面是修改后的完整代码，我标了关键的改动点：

import React from 'react'; 
import { View, Button, TextInput } from 'react-native'; 

export default class App extends React.Component { 
  state = { myText: 'abc' };
  // 声明变量存储TextInput的引用
  textInputRef = null;

  _onPress = () => { 
    // 在setState的回调里执行滚动，确保状态已更新完毕
    this.setState(
      { myText: this.state.myText + '\n 1' },
      () => {
        // 确认引用存在后，调用滚动到底部的方法
        if (this.textInputRef) {
          this.textInputRef.scrollToEnd({ animated: true });
        }
      }
    );
  }; 

  render() { 
    return ( 
      <View> 
        {/* 通过回调ref获取TextInput的实例 */}
        <TextInput 
          ref={(ref) => this.textInputRef = ref}
          style={{ height: 65, backgroundColor: 'red' }} 
          multiline={true} 
          value={this.state.myText} 
        /> 
        <Button onPress={this._onPress} title="Add text" color="#841584" /> 
      </View> 
    ); 
  } 
}

关键逻辑说明： #

1. 获取TextInput引用：通过回调ref把TextInput的实例存到组件的textInputRef变量中，这样我们就能调用它内置的滚动方法（当multiline为true时，TextInput内部会复用ScrollView的能力）。
2. 异步状态更新后滚动：setState是异步执行的，必须在它的第二个回调参数里触发滚动——这时候myText已经更新，TextInput的内容也完成了重新渲染，scrollToEnd才能准确滚动到最新内容的底部。
3. 滚动动画控制：scrollToEnd的参数{ animated: true }会让滚动有平滑的动画效果，如果不需要动画，改成false即可。

内容的提问来源于stack exchange，提问作者duskandawn