Question

我正在使用react-native构建一个应用程序，该应用程序针对iOS和Android 其中一件事就是有一个连接到键盘的文本输入它的工作方式是TextInput位于屏幕的底部。触摸时 - 键盘打开，文本输入在键盘上以相同的速度向上或向下动画（因为它们连在一起）。
现在，我使用onKeyboardWillShow和onKeyboardWillHide并动画TextInput。问题是它不会以相同的速度移动基本上，我正在尝试这样做：
https://github.com/Just-/UIViewController-KeyboardAnimation
任何建议都会有所帮助。

Answer 1

使用本机的键盘避免查看 KeyboardAvoidingView和Example 喜欢

import {ScrollView, Text, TextInput, View, KeyboardAvoidingView} from "react-native";

并在渲染函数中嵌套View和TextInput

<KeyboardAvoidingView behavior='padding'>
  <View style={styles.textInputContainer}>
    <TextInput
      value={this.state.data}
      style={styles.textInput}
      onChangeText={this.handleChangeData}
    />
  </View>
</KeyboardAvoidingView>

它会处理那个

Answer 2

我最接近键盘动画的方法是使用LayoutAnimation：

import React, { LayoutAnimation } from 'react-native';

componentWillMount() {
  DeviceEventEmitter.addListener('keyboardWillShow', this.keyboardWillShow.bind(this));
  DeviceEventEmitter.addListener('keyboardWillHide', this.keyboardWillHide.bind(this));
}

keyboardWillShow(e) {
  const visibleHeight = Dimensions.get('window').height - e.endCoordinates.height;
  LayoutAnimation.configureNext(LayoutAnimation.create(
    e.duration,
    LayoutAnimation.Types[e.easing]
  ));
  this.setState({ visibleHeight });
}

this.state.visibleHeight管理整个<View>容器高度。

当然不要忘记停止听键盘事件：

componentWillUnmount() {
  DeviceEventEmitter.removeAllListeners('keyboardWillShow');
  DeviceEventEmitter.removeAllListeners('keyboardWillHide');
}

Cf AnimationsLayout源代码：https://github.com/facebook/react-native/blob/60db876f666e256eba8527251ce7035cfbca6014/Libraries/LayoutAnimation/LayoutAnimation.js#L26

如何在react-native中将TextInput附加到键盘

2 个答案: