0

当键盘打开时，我一直在尝试滚动键盘上方的按钮，我正在使用“react-native-keyboard-aware-scroll-view”，当我将按钮对齐文本字段下方的顶部时，它变得很方便，但我希望我的按钮在屏幕底部对齐（flex-end），在这种情况下，键盘覆盖我的按钮并且按钮不会向上滑动。在 Android 模拟器中它工作正常，但在 iOS 中却不是。我尝试了不同的东西，让 extraScrollHeight 也不起作用，它具有一两个文本字段和更大的屏幕尺寸。请提出一些建议。

未打开键盘时的Android 打开键盘时的Android

未打开键盘时的iOS 打开键盘时的iOS

这是我的代码。

<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};
`;

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

4

2 回答 2

0

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

于 2022-02-14T13:16:53.967 回答
0

可以使用键盘高度使其在 iOS 上运行。您可以制作一个自定义钩子来获取键盘高度，并根据键盘高度从底部给出按钮边距。它适用于 iOS 和 android 上面的代码工作正常。

使用键盘钩子

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>)
    }
于 2022-02-15T13:05:13.027 回答