键盘仅在 iOS 模拟器中覆盖屏幕底部的按钮

Question

我一直在尝试在键盘打开时将我的按钮滚动到键盘上方，我正在使用“react-native-keyboard-aware-scroll-view”，当我将我的按钮对齐到文本字段正下方的顶部时，它变得很方便，但我想要我的按钮要在屏幕底部对齐 (flex-end)，在这种情况下键盘会盖住我的按钮并且按钮不会向上滑动。在 Android 模拟器中它运行良好，但在 iOS 中则不然。我尝试了不同的东西，给 extraScrollHeight 也确实工作了一个有一个或两个文本字段和更大的屏幕尺寸。请提出一些建议。

这是我的代码。

<SafeAreaContainer>
            <KeyboardAwareScrollContainer
                showsVerticalScrollIndicator={false}
                contentContainerStyle={{ flex: 1 }}>
                <FormikContainer>
                    <Formik
                        initialValues={{ email: '' }}
                        onSubmit={values => onSubmitEmail(values)}>
                        {({ values, errors }) => (
                            <FormikInternal>

                                <TextInput
                                    style={styles.input}
                                    onChangeText={ (val) => {console.log(val);}}
                                    value={values.email}
                                  
                                />
                                <TextInput
                                    style={styles.input}
                                    onChangeText={ (val) => {console.log(val);}}
                                    value={values.email}
                                />
                                <TextInput
                                    style={styles.input}
                                    onChangeText={ (val) => {console.log(val);}}
                                    value={values.email}
                                />
                                <TextInput
                                    style={styles.input}
                                    onChangeText={ (val) => {console.log(val);}}
                                    value={values.email}
                                />
                                <TextInput
                                    style={styles.input}
                                    onChangeText={ (val) => {console.log(val);}}
                                    value={values.email}
                                />
                      
                                <Button bgColor="red">
                                    <Text fontSize={16} color={theme.color.white}>
                                        {LABELS.Continue}
                                    </Text>
                                </Button>
                              
                            </FormikInternal>
                        )
                        }
                    </Formik>
                </FormikContainer>
            </KeyboardAwareScrollContainer>
        </SafeAreaContainer>

使用的样式组件

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import styled from 'styled-components/native';

export const SafeAreaStyled = styled(SafeAreaView)`
    flex: 1;
    background-color: ${({ backgroundColor, theme }) => backgroundColor || theme.color.white};
    padding-horizontal: ${({ paddingHorizontal }) => `${scale(paddingHorizontal)}px`};
    padding-vertical: ${({ paddingVertical }) => `${scale(paddingVertical)}px`};
`;

export const KeyboardAwareScrollContainer = styled(KeyboardAwareScrollView)`
    background-color: ${({ backgroundColor, theme }) => backgroundColor || theme.color.white};
`;
export const FormikContainer = styled.View`
    flex: 1;
    margin-top: ${scale(32)}px;
    background-color: ${({ theme }) => theme.color.white};
`;
export const FormikContainer = styled.View`
    flex: 1;
    margin-top: ${scale(32)}px;
    background-color: ${({ theme }) => theme.color.white};
`;

我正在考虑制作键盘打开侦听器并在键盘打开时为键盘高度提供按钮边距，但这是最后的解决方案，如果有任何其他问题，请提出建议。

Answer 1

你也可以用这个替代https://reactnative.dev/docs/keyboardavoidingview

Answer 2

可以使用键盘高度使其在 iOS 上工作。您可以制作自定义挂钩以获取键盘高度，并根据键盘高度从底部提供按钮边距。它适用于 iOS 和 android 以上代码工作正常。

使用KeyboardHook

import { useEffect, useState } from 'react';
import { Keyboard } from 'react-native';

export const useKeyboard = () => {
    const [keyboardHeight, setKeyboardHeight] = useState(0);
useEffect(() => {
        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', e => {
            setKeyboardHeight(e.endCoordinates.height);
        });
        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
            setKeyboardHeight(0);
        });
        return () => {
            keyboardDidHideListener.remove();
            keyboardDidShowListener.remove();
        };
    }, []);
    return keyboardHeight;
};

具有键盘感知滚动视图的组件

export const YourComponent = () => {
    
    const keyboardHeight = useKeyboard();
    return(
           <SafeAreaContainer>
            <KeyboardAwareScrollContainer
                showsVerticalScrollIndicator={false}
                contentContainerStyle={{ flex: 1 }}>
                <FormikContainer>
                    <Formik
                        initialValues={{ email: '' }}
                        onSubmit={values => onSubmitEmail(values)}>
                        {({ values, errors }) => (
                            <FormikInternal>

                                <TextInput
                                    style={styles.input}
                                    onChangeText={ (val) => {console.log(val);}}
                                    value={values.email}
                                  
                                />
                                <Button bgColor="red" marginBottom={Platform.OS === 'ios' ? keyboardHeight: 0}>
                                    <Text fontSize={16} color={theme.color.white}>
                                        {LABELS.Continue}
                                    </Text>
                                </Button>
                              
                            </FormikInternal>
                        )
                        }
                    </Formik>
                </FormikContainer>
            </KeyboardAwareScrollContainer>
        </SafeAreaContainer>)
    }

键盘仅在 iOS 模拟器中覆盖屏幕底部的按钮

Keyboard overrides the button at bottom of screen in iOS simulator only

ios

tpkeyboardavoiding

react-native