如何使鍵盤不覆蓋輸入-本機反應

Question

我正在處理我的第一個反應原生項目。 這是一種形式，我遇到的問題是鍵盤覆蓋了輸入，我使用帶有“Scrollview”選項的“KeyboardAvoidingView”。 這樣做的鍵盤 function 工作很漂亮，但滾動視圖有背景，也將我的表單內容推到頂部，有什么想法嗎？

這是我的代碼：

import KeyboardAvoidingWrapper from './../components/KeyboardAvoidingWrapper';

// 
export default function Info({navigation}) {
    return ( 
        <KeyboardAvoidingWrapper> 
            <View style={styles.MainContainer}>
                <ImageBackground source={BACKGROUND} style={styles.style1}>
                 
                
                <View style={styles.ContentArea}>  
                    <Formik
                        initialValues={{firstName: '', lastName: ''}}
                        onSubmit={(values) =>{
                            console.log(values)
                        }}
                        >
                        {({handleChange, handleBlur, handleSumbit, values}) => (
                            <View style={styles.FormContent}>
                                <MyTextInput
                                    label        = "First Name" 
                                    onChangeText = {handleChange('firstName')}
                                    onBlur       = {handleBlur('firstName')}
                                    values       = {values.firstName}
                                />
                                <MyTextInput
                                    label        = "Last Name" 
                                    onChangeText = {handleChange('lastName')}
                                    onBlur       = {handleBlur('lastName')}
                                    values       = {values.lastName}
                                />
                                <MyTextInput
                                    label        = "Addrees" 
                                    onChangeText = {handleChange('Addrees')}
                                    onBlur       = {handleBlur('badge')}
                                    values       = {values.badge}
                                />
                                <MyTextInput
                                    label        = "Company" 
                                    onChangeText = {handleChange('company')}
                                    onBlur       = {handleBlur('company')}
                                    values       = {values.company}
                                />
                            </View>
                        )}
                        </Formik>
                    </View>
                </ImageBackground>
            </View> 
        </KeyboardAvoidingWrapper>
         
    )
}

KeyboardAvoidingWrapper.js

import React from 'react';
import { Keyboard, KeyboardAvoidingView, ScrollView, TouchableWithoutFeedback, StyleSheet } from 'react-native';
import { format } from 'path'
import { inputEncoding } from 'min-document'

// KEYBOARD AVOIDING VIEW

const KeyboardAvoidingWrapper = ({children}) => {
    return (
        <KeyboardAvoidingView style={{flex: 1}}>
            <ScrollView >
                <TouchableWithoutFeedback onPress={Keyboard.dismis}>
                    {children}
                </TouchableWithoutFeedback>
            </ScrollView>
        </KeyboardAvoidingView>
    );
}

export default KeyboardAvoidingWrapper;

Answer 1

我認為您應該指定不同的行為，這是我在我的應用程序中使用它的方式。

<KeyboardAvoidingView
    behavior={Platform.OS === "ios" ? "padding" : "height"}
    style={{ flex: 1 }}>
</KeyboardAvoidingView>