带有 React native 的键盘和模式（UI 小猫）

Question

我有一个模型里面有文本输入，但是，我的键盘与这个字段重叠。
我尝试使用 KeyboardAvoidingView，但没有用。

有人可以帮我吗？

Answer 1

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

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

该组件auto-scroll 用于聚焦文本输入！

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>

带有 React native 的键盘和模式（UI 小猫）

Keyboard and Modal with React native (UI Kitten)

react-native

react-native-ui-kitten