Question

我正在使用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}
              >

Answer 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',
  },
});

请注意：样式很重要。

你很好！

ReactNative如何在键盘打开时保持滚动视图位置

1 个答案: