更新键盘上方的移动按钮

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有一个名为extraScrollHeight的道具，可用于此目的。

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中，因为这将获得键盘的高度并允许您对Button进行动画处理。

import { Keyboard, Animated } from 'react-native'
在按钮的initialPosition的状态下设置新的Animated.Value。
在keyboardDidShow的{{1}}和keyboardDidHide中添加侦听器，并在componentDidMount中删除它们
将componentWillUnmount和_keyboardShow的方法添加到，可以将Button设置为高于键盘高度的动画
将按钮包含在_keyboardHide设置的Animated.View中

代码如下：

this.state.initialPosition

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

值得注意的是

请注意，如果您将android：windowSoftInputMode设置为AdjustResize或 AdjustNothing，将只有keyboardDidShow和keyboardDidHide事件是在Android上可用。 keyboardWillShow以及keyboardWillHide是由于没有本机，因此通常在Android上不可用相应事件

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

否则，我将使用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' } });和keyboardWillShow，因为它们会在显示/隐藏键盘之前被调用，从而使动画略有闪烁。

最终想法

显然，这是概念的证明，但它应该使您对如何完成所需的工作有个好主意。

要使它性能更高，可以做的一件事是，如果您在应用程序中的任何位置之前显示键盘，就是要捕获键盘的高度并保存下来，以便以后使用。您可以将其保存在keyboardWillHide，redux中，或仅通过导航将其传递到此屏幕。然后，您可以使用AsyncStorage的{{1}}属性来移动按钮。

Answer 2

不知道这是否仍然有用，但这对我有用。希望这对将来有帮助。诀窍是将“键盘感知” Scrollview放入视图中。您还有一个附加到Flex-End的View。这将始终保留在屏幕底部。

<View style={{flex: 1, flexDirection:'column'}}>
  <KeyboardAwareScrollView>
    {...things that need to scroll}
  </KeyboardAwareScrollView>
  <View style={{flex-direction:'flex-end'}}>
    {...whatever button or text}
  </View>
</View>

该按钮上的KeyboardAwareScrollView

2 个答案:

更新键盘上方的移动按钮

最终想法