React Native：KeyboardAvoidingView 的子视图以不同的速度滞后/移动

Question

我希望它们的所有子视图都以一种干净的动作移动，但是如果您查看 gif，您可以看到 Text 子视图和 TextInput 子视图重叠并以不同的速度移动。看起来 Text 子视图会立即调整其位置，而按钮和 TextInput 子视图以更轻松的缓中缓出方式调整其位置。

主要导出组件

class SearchScreen extends React.Component {

    state = {search:""}

    render(){
        getArguments = {
            search: this.state.search
        }
        return (
            <KeyboardAvoidingView behavior="padding" style={styles.container}>
                <Text style={styles.searchTitle}>Search for a Movie in the OMDB Database</Text>
                <TextInput style={styles.searchField} onChangeText={text => this.setState({search:text})} ></TextInput>
                <SearchButton navigation = {this.props.navigation} getArguments={getArguments}/>
            </KeyboardAvoidingView>
        )
    }

}

造型

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: '#C8FEFE',
        alignItems: 'center',
        justifyContent: 'center'
    },
    searchButton: {
      marginTop: 20,
      backgroundColor: '#24D9E8',
      borderRadius: 5,
      padding: 5
    },
    searchField: {
      backgroundColor: '#FFF',
      textAlign: 'center',
      width: 200,
      borderRadius: 5,
      margin: 20,
      height: 30
    },
    searchTitle:{
        fontWeight: 'bold',
        fontSize: 20,
        textAlign:'center'
    }
  });

---

GitHub

github上的完整项目

Answer 1

解决方案 1：iOS 快速修复

您可以将元素包装在视图中，这将使它们按照您想要的方式对键盘做出反应：

// styles
contentContainer: {
    alignItems: 'center',
}

// SearchScreen
<View style={styles.contentContainer}>
    <Text style={styles.searchTitle}>Search for a Movie in the OMDB Database</Text>
    <TextInput style={styles.searchField} onChangeText={text => this.setState({search:text})} ></TextInput>
    <SearchButton navigation = {this.props.navigation} getArguments={getArguments}/>
</View>

但是，这仅适用于 iOS。Android 上的键盘工作方式略有不同。所以解决方案 2 是一种更可靠的做事方式。

解决方案 2：动画

避免键盘是相当棘手的， Dominik 提到的Spencer Carli 的文章是使用KeyboardAvoidingView. 这些通常会给你你需要的东西。但如果您希望键盘状态之间实现平滑、受控的过渡，则应该使用动画。流程如下：

1. 将键盘事件侦听器添加到您的组件（keyboardDidShow和keyboardDidHide）
2. 将要移动的内容包裹在Animated.View
3. on ，按所需的偏移量keyboardDidShow对 的 y 位置进行动画处理。Animated.View返回的事件（类型为KeyboardEvent）以及DimensionsAPI 具有您需要的所有测量值。提示：使用Animated.timing带有贝塞尔曲线的动画Easing来控制视图的移动方式。
4. 打开keyboardDidHide，重复动画，但方向相反。

希望这可以帮助！