React Native 如何在键盘打开时保持滚动视图位置答案

【问题标题】：ReactNative How to keep the scroll view position when the keyboard openedReact Native 如何在键盘打开时保持滚动视图位置
【发布时间】：2019-06-03 03:32:48
【问题描述】：

我正在使用 React Native 的 ScrollView 和 FlatList。打开键盘后，我希望看到与打开键盘之前相同的屏幕。

我想我可以根据键盘状态使用scrollTo 方法它不能正常工作。

有没有类似案例的典型实现方式？

keyboardWillShow(e) {
  const { scrollView } = this;
  const { scrollPostiion } = this.state;
  const { height } = e.endCoordinates;
  this.setState({
    keyboardHeight: height,
    scrollPostiion: scrollPostiion + height,
  });
  scrollView.scrollTo({ x: 0, y: scrollPostiion + height, animated: false });
}

keyboardWillHide() {
  const { scrollView } = this;
  const { scrollPostiion, keyboardHeight } = this.state;
  this.setState({
    keyboardHeight: 0,
    scrollPostiion: scrollPostiion - keyboardHeight,
  });
  scrollView.scrollTo({ x: 0, y: scrollPostiion - keyboardHeight, animated: false });
}

changeNowScrollPosition = (event) => {
  this.setState({
    scrollPostiion: event.nativeEvent.contentOffset.y,
  });
}

              <ScrollView
                ref={(c) => { this.scrollView = c; }}
                keyboardShouldPersistTaps="handled"
                pinchGestureEnabled={false}
                keyboardDismissMode="interactive"
                onScroll={(event) => {
                  changeNowScrollPosition(event);
                }}
                onScrollEndDrag={(event) => {
                  changeNowScrollPosition(event);
                }}
                scrollEventThrottle={16}
              >

【问题讨论】：

这个库可能对npmjs.com/package/react-native-keyboard-aware-scrollview有帮助
我通过将 scrollTo 从 KeyboardWillShow 移动到 KeyboardDidShow 解决了这个问题。就我而言，当我使用 KeyboardAvoidingView 时，我无法使用它，因为滚动视图下方有一个空白区域。

标签： react-native react-native-scrollview

【解决方案1】：

使用 KeyboardAvoidingView ：下面是一个简单的例子：

import React, { Component } from 'react';
import { Text, Button, StatusBar, TextInput, KeyboardAvoidingView, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  state = {
    email: '',
  };

  render() {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content" />
        <KeyboardAvoidingView behavior="padding" style={styles.form}>
          <TextInput
            style={styles.input}
            value={this.state.email}
            onChangeText={email => this.setState({email})}
            ref={ref => {this._emailInput = ref}}
            placeholder="email@example.com"
            autoCapitalize="none"
            autoCorrect={false}
            keyboardType="email-address"
            returnKeyType="send"
            onSubmitEditing={this._submit}
            blurOnSubmit={true}
          />
          <View>
            <Button title="Sign Up" onPress={this._submit} />
            <Text style={styles.legal}>
              Some important legal fine print here
            </Text>
          </View>
        </KeyboardAvoidingView>
      </View>
    );
  }

  _submit = () => {
    alert(`Confirmation email has been sent to ${this.state.email}`);
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  input: {
    margin: 20,
    marginBottom: 0,
    height: 34,
    paddingHorizontal: 10,
    borderRadius: 4,
    borderColor: '#000000',
    borderWidth: 1,
    fontSize: 16,
  },
  legal: {
    margin: 10,
    color: '#333',
    fontSize: 12,
    textAlign: 'center',
  },
  form: {
    flex: 1,
    justifyContent: 'space-between',
  },
});

请注意：样式很重要。

你可以走了！

【讨论】：

问题是关于“滚动视图”而不是“视图”。