我在屏幕底部有一个按钮，在屏幕顶部有一个输入字段。什么时候<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>
    )
} 

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

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

额外的滚动高度- 为键盘添加额外的偏移量。如果你想坚持的话很有用 键盘上方的元素。

你可以将它与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 and keyboardDidHide in the componentDidMount并将它们删除componentWillUnmount
4. 将方法添加到 for_keyboardShow and _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 https://snack.expo.io/@andypandy/animated-button-above-keyboard

值得注意的是

请注意，如果将 android:windowSoftInputMode 设置为 adjustmentResize 或 adjustNothing，只有keyboardDidShow和keyboardDidHide事件会被 在 Android 上可用。 KeyboardWillShow 和 KeyboardWillHide 是 通常在 Android 上不可用，因为没有原生的 对应事件

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

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

最后的想法

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

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