按钮上的 KeyboardAwareScrollView

Question

我在屏幕底部有一个按钮，在屏幕顶部有一个输入字段。当<TextInput>聚焦时 - 键盘与按钮重叠，并且在单击返回按钮之前无法按下。我希望在键盘打开时将“提交”按钮向上推，并在键盘未激活时返回到屏幕底部。

KeyboardAwareScrollView 可以很好地使用<TextInput/>，但似乎不适用于该按钮。我有什么想法可以实现这一目标吗？谢谢！

render() {
    return (
        <KeyboardAwareScrollView
            contentContainerStyle={{
                flex: 1,
                flexDirection: 'column',
                justifyContent: 'flex-end',
                alignItems: 'center',
                backgroundColor: 'skyblue'
            }}
        >

            <View>
                <TextInput placeholder='John'
                           autoFocus={true}/>
                <Button>
                    <Text>Submit</Text>
                </Button>
            </View>
        </KeyboardAwareScrollView>
    )
} 

Answer 1

KeyboardAwareScrollView 有一个名为的 propextraScrollHeight可以用于此目的。

https://github.com/APSL/react-native-keyboard-aware-scroll-view#props

extraScrollHeight - 向键盘添加额外的偏移量。如果您想将元素粘贴在键盘上方，这很有用。

您可以将其与onFocus道具结合起来进行设置，extraScrollHeight以便键盘保持在按钮下方。

<KeyboardAwareScrollView
  contentContainerStyle={{
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'flex-end',
      alignItems: 'center',
      backgroundColor: 'skyblue'
  }}
  extraScrollHeight={this.state.extraScrollHeight}>
  <View>
    <TextInput 
      ref={ref => { this.textInput = ref; }}
      placeholder='John'
      onFocus={(event) => {
        this.setState({extraScrollHeight:30})
      }}
      autoFocus={true}
      />
    <Button> 
      <Text>Submit</Text>
    </Button>
  </View>
</KeyboardAwareScrollView>

extraScrollHeight这将允许您根据TextInput您正在查看的内容动态设置。您需要管理extraScrollHeight每个TextInput.

或者，您可以设置extraScrollheight并保留它。

更新键盘上方的移动按钮

问题发布者更新了他们的问题，指出 TextInput 位于页面顶部，而按钮位于底部。按钮显示在键盘上方向上移动。

或者，您可以向 中添加侦听器Keyboard，因为这将获取键盘的高度并允许您为按钮设置动画。

1. import { Keyboard, Animated } from 'react-native'
2. 为按钮的初始位置设置一个新的Animated.Value状态。
3. 在 中添加侦听器keyboardDidShow，并在 中删除侦听器keyboardDidHidecomponentDidMountcomponentWillUnmount
4. 将方法添加到 for 中_keyboardShow，_keyboardHide这将使 Button 的动画效果高于键盘的高度
5. 将按钮包含在Animated.View由以下设置的位置中this.state.initialPosition

这是代码：

import * as React from 'react';
import { View, StyleSheet, Animated, Button, TextInput, Keyboard } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      initialPosition: new Animated.Value(60)
    }
  }

  componentDidMount () {
    this.keyboardShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardShow);
    this.keyboardHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardHide);
  }

  componentWillUnmount() {
    this.keyboardShowListener.remove();
    this.keyboardHideListener.remove();
  }

  _keyboardHide = (e) => {
    Animated.timing(
      this.state.initialPosition,
      {
        toValue: 60
      }
    ).start();
  }

  _keyboardShow = (e) => {
    Animated.timing(
      this.state.initialPosition,
      {
        toValue: e.endCoordinates.height
      }
    ).start();
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.mainContainer}>
          <TextInput 
            placeholder='Enter first name'
            autoFocus
            style={{fontSize: 24}}
          />
          </View>

        <Animated.View style={{bottom: this.state.initialPosition}}>
          <Button 
            onPress={() => alert('submit')} title={'submit'} 
          />
        </Animated.View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
  },
  mainContainer: {
    flex: 1,
    alignItems: 'center'
  }
});

这是小吃https://snack.expo.io/@andypandy/animated-button-above-keyboard

值得注意的是

请注意，如果将 android:windowSoftInputMode 设置为 adjustmentResize 或 adjustmentNothing，则 Android 上仅提供 KeyboardDidShow 和 KeyboardDidHide 事件。KeyboardWillShow 和 KeyboardWillHide 通常在 Android 上不可用，因为没有本机对应的事件

https://facebook.github.io/react-native/docs/keyboard#addlistener

否则我会使用keyboardWillShowandkeyboardWillHide因为它们将在键盘显示/隐藏之前被调用，从而使动画变得更平滑。

最后的想法

显然，这是一个概念验证，但它应该让您了解如何实现您想要的目标。

为了提高性能，您可以做的一件事是，如果您在应用程序中之前的任何位置显示键盘，则捕获键盘的高度并保存它，以便您以后可以访问。您可以将其保存在redux、中AsyncStorage，或者只是通过导航将其传递到此屏幕。然后您可以使用onFocus的属性TextInput来移动按钮。