对于数字键盘和小键盘:
似乎您不需要任何库,
returnKeyType='done'
可以在v0.47.1上与“number-pad”和“numeric”一起使用。
对于普通键盘,您可以看一下这个:
https://github.com/ardaogulcan/react-native-keyboard-accessory
和
https://github.com/douglasjunior/react-native-keyboard-manager
您需要查看的Github主题:
https://github.com/facebook/react-native/issues/1190
和
https://github.com/facebook/react-native/issues/641
希望这能有所帮助。
KeyboardAvoidingView
组件,例如:<KeyboardAvoidingView keyboardVerticalOffset={50}>
// View you want to be moved up when keyboard shows.
</KeyboardAvoidingView>
keyboardVerticalOffset={50}
是键盘和视图之间的边距,它将是您想要的视图或按钮的高度。希望这能有所帮助。
编辑:我认为最好且最可定制的方法是监听键盘事件,并根据其更改您想要放在键盘上方的组件的绝对位置。
import { Keyboard } from "react-native";
componentDidMount () {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (event) => this.keyboardDidShow(event));
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', (event) => this.keyboardDidHide(event));
}
keyboardDidShow(event) {
this.setState({keyboardShow:true,keyboardHeight:event.endCoordinates.height}) // <<You got the keyboard height
}
keyboardDidHide(event) {
this.setState({keyboardShow:false,keyboardHeight:0})
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
style={{
position: "absolute",
bottom: this.state.keyboardHeight + 20,
right: 0
}}
如果你想隐藏它(Done 按钮),只需要在 JSX 中使用 keyboardShow
状态进行判断即可。
代码:
import React from 'react'
import { StyleSheet, Platform, View, Text, KeyboardAvoidingView, Keyboard } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
export default class StripAboveKeyboard extends React.Component {
constructor(props) {
super(props)
this.state = { keyboardHeight: 0 }
}
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (event) => this.keyboardDidShow(event));
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', (event) => this.keyboardDidHide(event));
}
keyboardDidShow = (event) => this.setState({ keyboardShow: true, keyboardHeight: event.endCoordinates.height > 100 ? (Platform.OS == 'ios' ? event.endCoordinates.height : 0) : 0 })
keyboardDidHide = (event) => this.setState({ keyboardShow: false, keyboardHeight: 0 })
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
render() {
marginFromBottom = (this.state.keyboardHeight == 0) ? 0 : this.state.keyboardHeight
return (
<KeyboardAvoidingView style={{ flex: 1 }}>
<View style={style.parent}>
<View style={style.upper}>
<TextInput style={style.textInput}>User Name</TextInput>
</View>
<View style={{ ...style.bottomParent, marginBottom: marginFromBottom }}>
<Text style={style.bottom}>Press me</Text>
</View>
</View>
</KeyboardAvoidingView>)
}
}
const style = StyleSheet.create({
parent: {
flex: 1,
padding: 10,
backgroundColor: 'pink',
},
upper: {
paddingTop: 44,
backgroundColor: 'green',
padding: 10,
flex: 1,
marginBottom: 10,
},
textInput: {
height: 40, borderColor: 'gray', borderWidth: 1
},
bottomParent: {
justifyContent: "center",
alignItems: "center",
backgroundColor: 'red',
width: '100%',
height: 40,
},
bottom: {
textAlignVertical: "center", textAlign: "center",
}
})
那不是一个库或特殊的东西。那只是一个随着键盘移动的视图。
它向您展示了不同的方法来使元素尊重键盘。
在多行 TextInput
中,"完成" 按钮将无法工作。要关闭键盘,您必须使用
KeyboardAvoidingView
这将有助于通过触摸软键盘外部来关闭它