如何使键盘不覆盖输入-本机反应答案

【问题标题】：How to make the keyboard to not cover inputs - react native如何使键盘不覆盖输入-本机反应
【发布时间】：2021-05-27 07:00:18
【问题描述】：

我正在开发我的第一个 react 原生项目。这是一个表单，我遇到的问题是键盘覆盖了输入，我使用带有“Scrollview”选项的“KeyboardAvoidingView”。这样做，键盘功能很漂亮，但滚动视图有背景，并且还将我的表单内容推到顶部，有什么想法吗？

这是我的代码：

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;

【问题讨论】：

标签： reactjs react-native expo

【解决方案1】：

我认为你应该指定不同的行为，这是我在我的应用程序中使用它的方式。

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

【讨论】：