我在屏幕底部有一个按钮，在屏幕顶部有输入字段。当<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
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>
这将允许您根据所查看的TextInput动态设置extraScrollHeight。您需要在每个TextInput上管理extraScrollHeight。
或者，你可以设置一个extraScrollheight，然后离开它
移动键盘上方按钮的更新
问题海报更新了他们的问题，说明TextInput位于页面顶部，而按钮位于底部。按钮显示向上移动到键盘上方。
或者，您可以将监听器添加到Keyboard，因为这将获得键盘的高度，并允许您为按钮设置动画。
import { Keyboard, Animated } from 'react-native'- 将新的
Animated.Value设置为按钮initialPosition的状态 - 在
componentDidMount中向keyboardDidShow和keyboardDidHide添加侦听器，并在componentWillUnmount中删除它们 - 将
_keyboardShow和_keyboardHide的方法添加到，这将使按钮的动画高于键盘的高度 - 包含
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/@键盘上方的动画按钮
值得注意的是
注意，如果您将android:windowSoftInputMode设置为adjustResize或adjustNothing，将只显示键盘DidShow和键盘DidHide事件可在Android上使用。键盘WillShow和键盘WillHide通常在Android上不可用，因为没有本机相应事件
https://facebook.github.io/react-native/docs/keyboard#addlistener
否则，我会使用keyboardWillShow和keyboardWillHide，因为它们将在键盘显示/隐藏之前被调用，从而使动画更流畅。
最后的想法
显然，这是一个概念的证明，但它应该给你一个如何实现你想要的好主意。
要使其更具性能，您可以做的一件事是，如果您在应用程序中之前的任何位置显示键盘，请捕获键盘的高度并保存它，以便以后可以访问。您可以将其保存在redux、AsyncStorage中，也可以通过导航将其传递到此屏幕。然后您可以使用TextInput的onFocus属性来移动按钮。
不确定这是否仍然相关，但这对我有效。希望这能在未来帮助其他人。诀窍是将键盘感知滚动视图放在视图中。您有一个附加到柔性端的视图。这将始终停留在屏幕底部。
<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>