Question

我正在尝试调用一个函数，该函数将触发TextInput上的onFoucs，它将向下滚动scrollView（使用scrollToEnd()）

所以这是我的班级组件

class MyCMP extends Component {

  constructor(props) {
    super(props);
    this.onInputFocus = this.onInputFocus.bind(this);
  }

  onInputFocus() {
    setTimeout(() => {
      this.refs.scroll.scrollToEnd();
      console.log('done scrolling');
    }, 1);
  }

  render() {
    return (
      <View>
        <ScrollView ref="scroll">
          { /* items */ }
        </ScrollView>
        <TextInput onFocus={this.onInputFocus} />
      </View>
    );
  }
}

export default MyCMP;

上面的组件有效并且它会滚动但是需要花费很多时间...我正在使用setTimeout因为没有它它只是在屏幕下方而不计算键盘的高度所以它不能滚动到足够即使我一直打字（并触发输入的焦点），它仍然不会一直向下滚动。

我正在处理它好几个小时，我确实将windowSoftInputMode设置为adjustResize我确实经历了react-native-keyboard-aware-scroll-view或react-native-auto-scroll之类的模块但没有他们真正做我需要的工作。

任何方向如何以正确的方式完成它将非常感激。谢谢！

Answer 1

而不是使用setTimeout，而是使用反应原生的Keyboard API。您为键盘显示添加事件侦听器，然后将视图滚动到结尾。如果组件中有多个输入，则可能需要创建一些关注输入的逻辑，但如果只有一个输入，则可以像下面的示例那样进行。

另一件好事是将你的refs改为功能性的，因为字符串引用被认为是遗留的，并且将在未来的版本中被删除。更多信息here。

class MyCMP extends Component {

  constructor(props) {
    super(props);
    this.scroll = null;
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
  }

  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
  }

  _keyboardDidShow() {
    this.scroll.scrollToEnd();
  }

  render() {
    return (
      <View>
        <ScrollView ref={(scroll) => {this.scroll = scroll;}}>
          { /* items */ }
        </ScrollView>
        <TextInput />
      </View>
    );
  }
}

export default MyCMP;

Answer 2

如果您的数据集很大，React Native文档会告诉您使用FlatList。

要使其滚动到底部，这对我有用

<FlatList
  ref={ref => (this.scrollView = ref)}
  onContentSizeChange={() => {
    this.scrollView.scrollToEnd({ animated: true, index: -1 }, 200);
  }}
/>

Android上的react-native scrollView - scrollToEnd

2 个答案: