javascript - 输入焦点更改时 KeyboardAvoidinView 不起作用

Question

我正在开发一个 React Native 应用程序。目前，我正在处理表单和键盘相关的事情。我习惯KeyboardAvoidingView在键盘出现时调整应用内容。视图内的内容是可滚动的，因此当键盘出现时，它会向下滚动以显示表单而不是图像。

当我更改输入字段之间的焦点时，问题就来了。在某些情况下它可以正常工作，但在特定情况下它不起作用。我正在使用我的 Android 手机来测试该应用程序。重现行为的图片：

似乎当我单击“Usuario”输入时，高度并没有降低。当我以相反的顺序执行此操作时，它不会发生：

总是当我从“Contraseña”切换到“Usuario”时。这是代码：

App.js

import React, { useEffect, useRef } from "react";
import { StyleSheet, ScrollView, Text, Image, KeyboardAvoidingView, Keyboard } from "react-native";
import TextButton from './src/components/buttons/textButton/textButton';
import SimpleInput from './src/components/inputs/simple/simple';
import { useFonts, OpenSans, OpenSans_600SemiBold, OpenSans_400Regular } from '@expo-google-fonts/open-sans';
import Constants from 'expo-constants'

export default function App() {

  const scrollComponent = useRef(null);

  // const [ styleKeyboard, setStyleKeyboard ] = useState(true)
  useEffect(() => {

    Keyboard.addListener("keyboardDidShow", () => {
      scrollComponent.current.scrollToEnd();
    })

  })

  let [fontsLoaded] = useFonts({
    OpenSans,
    OpenSans_600SemiBold,
    OpenSans_400Regular
  });

  return (
    <KeyboardAvoidingView 
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      style={styles.screenContainer}
      >
      <ScrollView 
        showsVerticalScrollIndicator={false}
        ref={scrollComponent}
        style={styles.content}
        keyboardShouldPersistTaps='always'
        >
        <Image
          style={{
            width: 203,
            height: 250,
            alignSelf: "center"
          }}
          source={require('./assets/icon-5359553__340.webp')}
        />
        <Text
          style={{
            textAlign: "center",
            marginVertical: 10,
            fontSize: 32,
            fontFamily: 'OpenSans_600SemiBold',
            color: '#03242B'
          }}>
          Texto de prueba para título
        </Text>
        <SimpleInput
          type='username'
          style={{ marginVertical: 10 }}
          placeholder="Usuario"
        />
        <SimpleInput 
          type="password"
          style={{ marginVertical: 10 }}
          placeholder="Contraseña"        
        />
        <TextButton 
          style={{ marginVertical: 10 }}
          text = 'Entrar'
        />
      </ScrollView>
    </KeyboardAvoidingView>
  );

}

const styles = StyleSheet.create({
  
  screenContainer: {
    flex: 1,
    justifyContent: "center",
    padding: '5%',
    marginTop: Constants.statusBarHeight,
    backgroundColor: '#F8F8F8'
  },

  content: {
    overflow: 'scroll'
  }

})

simple.js

import React, { useState } from 'react'
import { TextInput } from 'react-native'
import { styles } from './style'

const SimpleInput = (props) => {

    const [ stateStyle, setStateStyle ] = useState(true);

    let dynamicAttr = {}

    if(props.type == 'password'){
        dynamicAttr.secureTextEntry=true

        if(props.newPassword)
            dynamicAttr.textContentType='newPassword'
    }

    const focusStyle = () => {
        setStateStyle({
            borderWidth: 1,
            borderColor: '#054956'
        })
    }

    const blurStyle = () => {
        setStateStyle({})
    }

    return (
        <TextInput 
            style={[styles.main, props.style, stateStyle]} 
            placeholder={props.placeholder}
            placeholderTextColor="#898989"

            autoCompleteType={props.type}
            textContentType={props.type}
            {...dynamicAttr}

            onFocus={focusStyle}
            onBlur={blurStyle}
        ></TextInput>
    );

}

export default SimpleInput;

我认为这是与在输入外部单击退出焦点有关的问题，但添加keyboardShouldPersistTaps='always'到ScrollView不解决任何问题。

我认为问题可能出在这段代码中，但如果您需要SimpleInput样式或TextButton组件代码，请告诉我。

提前致谢。

编辑：我在一些问题上读过它。它似乎是and的一个错误。我认为这与谷歌键盘高级栏有关，它似乎提出了建议和类似的事情。我强烈认为这是 React Native 的一个错误，所以我将在那里打开一个问题，看看发生了什么。同时，我让这篇文章打开。secureTextEntryKeyboardAvoidingView

标签： javascriptreactjsreact-nativejsx