react-native - 带有 React Native 的键盘和模式（UI Kitten）

Question

我有一个内部带有 textinput 的模型，但是，我的键盘与该字段重叠。
我尝试使用 KeyboardAvoidingView，但没有奏效。

有人能帮助我吗？

Answer 1

有一个很好的库可以解决这个问题react-native-keyboard-aware-scroll-view

yarn add react-native-keyboard-aware-scroll-view

组件自动滚动到焦点文本输入！

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
<KeyboardAwareScrollView>
  <View>
    <TextInput />
  </View>
</KeyboardAwareScrollView>

Answer 2

检测键盘高度并移动模态的确切值：

这是我用来在每次键盘出现或消失时获取键盘高度的 useEffect：

const [keyboardSize, setKeyboardSize] = React.useState(0);

useEffect(() => {
    Keyboard.addListener("keyboardDidShow", (e) => {
        setKeyboardSize(e.endCoordinates.height)
    })

    Keyboard.addListener("keyboardDidHide", (e) => {
        setKeyboardSize(e.endCoordinates.height)
    })

    return (() => {
        Keyboard.removeAllListeners("keyboardDidShow");
        Keyboard.removeAllListeners("keyboardDidHide");
    })
}, [])

这是带有样式的模态和卡片：

<Modal
     visible={addUserModal}
     backdropStyle={styles.backdrop}
     style={styles.modal}
     onBackdropPress={() => setAddUserModal(false)}>
     <Card style={{ marginBottom: keyboardSize }} disabled={true}>
         <AddUser finished={() => { setAddUserModal(false) }}></AddUser>
     </Card>
</Modal>