react-native UI在键盘关闭和Android上的React native V 0.72.12中背景颜色变化时重新渲染,

w80xi6nr  于 5个月前  发布在  React
关注(0)|答案(3)|浏览(90)

你好,我注意到在ScrollView->KeybordAvoidView->TextInput中的工作文本输入字段中有一个奇怪的bug。当我们在输入框中输入内容并使用键盘的回车按钮关闭键盘时,组件会重新渲染。没有背景的情况下,它会将组件的灰色背景设置为组件的背景。

重现步骤:

import { useRef, useState,} from 'react';
 import { Text, View, ScrollView, KeyboardAvoidingView,TextInput } from 'react-native';
 const CreateUserAccount = () => {
 const firstName = useRef();
 const lastName = useRef();
 const [emailError, setEmailError] = useState(false);
 const [firstNameError, setFirstNameError] = useState(false);
 const [lastNameError, setLastNameError] = useState(false);
 const [emailValue, setEmailValue] = useState('');
 const [firstNameValue, setFirstNameValue] = useState('');
 const [lastNameValue, setLastNameValue] = useState('');
const LoginDetailsComponent=(props)=>{
 const { customStyleEmail, customStyleFirstName, customStyleLastName, ...otherProps } = props;
return (
 {props.textValueEmail}

{props.textValueFirstName}
<TextInput
placeholder={props.placeholderFirstName}
placeholderTextColor={props.placeholderTextColorFirstName}
ref={props.textInputRefFirstName}
secureTextEntry={props.isSecureTextFirstName}
keyboardType={props.keyBoardTypeFirstName}
onSubmitEditing={props.submitEditingFirstName}
returnKeyType={props.returnTypeFirstName}
returnKeyLabel={props.returnLableFirstName}
autoFocus={props.autoFocusValueFirstName}
maxLength={props.maximumLengthFirstName}
value={props.valueTextInputFirstName}
onChangeText={props.onTextChangeFirstName}
editable={props.isEditableFirstName}
autoCapitalize={props.isAutoCapitalizeFirstName}
blurOnSubmit={props.isBlurSubmitFirstName}
/>
{props.textValueLastName}
<TextInput
placeholder={props.placeholderLastName}
placeholderTextColor={props.placeholderTextColorLastName}
ref={props.textInputRefLastName}
secureTextEntry={props.isSecureTextLastName}
keyboardType={props.keyBoardTypeLastName}
onSubmitEditing={props.submitEditingLastName}
returnKeyType={props.returnTypeLastName}
returnKeyLabel={props.returnLableLastName}
autoFocus={props.autoFocusValueLastName}
maxLength={props.maximumLengthLastName}
value={props.valueTextInputLastName}
onChangeText={props.onTextChangeLastName}
editable={props.isEditableLastName}
autoCapitalize={props.isAutoCapitalizeLastName}
blurOnSubmit={props.isBlurSubmitLastName}
/>


);
 }
<ScrollView showsVerticalScrollIndicator={false} style={{backgroundColor:'red'}}>
 <LoginDetailsComponent
 textValueEmail={'email_address'}
 placeholderEmail={'email_address'}
 returnTypeEmail="next"
 keyBoardTypeEmail="email-address"
 submitEditingEmail={() => {
 firstName.current.focus();
 }}
 isBlurSubmitEmail={false}
 onTextChangeEmail={textemail => {
 setEmailValue(textemail), setEmailError(false);
 }}
 valueTextInputEmail={emailValue ? emailValue : ''}
 textValueFirstName={'first_name'}
 placeholderFirstName={'first_name'}
 textInputRefFirstName={firstName}
 returnTypeFirstName="next"
 submitEditingFirstName={() => {
 lastName.current.focus();
 }}
 isBlurSubmitFirstName={false}
 onTextChangeFirstName={textfirstName => {
 setFirstNameValue(textfirstName), setFirstNameError(false);
 }}
 valueTextInputFirstName={firstNameValue ? firstNameValue : ''}
 textValueLastName={'last_name'}
 placeholderLastName={'last_name'}
 textInputRefLastName={lastName}
 returnTypeLastName="done"

onTextChangeLastName={textlastname => {
setLastNameValue(textlastname), setLastNameError(false);
}}
valueTextInputLastName={lastNameValue ? lastNameValue : ''}
/>

 } export default CreateUserAccount;

#### React Native Version

0.72.12

#### Affected Platforms

Runtime - Android

#### Output of  `npx react-native info`

System:
OS: Windows 10 10.0.19045
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
Memory: 2.82 GB / 15.74 GB
Binaries:
Node:
version: 20.11.1
path: ~\AppData\Local\Temp\yarn--1714731090737-0.49295193624305766\node.CMD
Yarn:
version: 1.22.21
path: ~\AppData\Local\Temp\yarn--1714731090737-0.49295193624305766\yarn.CMD
npm:
version: 10.2.4
path: C:\Program Files\nodejs\npm.CMD
Watchman:
version: 20231008.002904.0
path: C:\ProgramData\chocolatey\bin\watchman.EXE
SDKs:
Android SDK:
API Levels:
- "29"
- "31"
- "33"
- "34"
Build Tools:
- 30.0.3
- 31.0.0
- 33.0.0
- 34.0.0
- 35.0.0
- 35.0.0
System Images:
- android-30 | Google Play Intel x86 Atom
- android-30 | Google Play Intel x86_64 Atom
- android-33 | Intel x86_64 Atom
- android-33 | Google APIs Intel x86_64 Atom
- android-33 | Google Play Intel x86_64 Atom
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-232.10300.40.2321.11668458
Visual Studio: Not Found
Languages:
Java:
version: 17.0.10
path: C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.12
wanted: 0.72.12
react-native-windows: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found


#### Stacktrace or Logs

No Logs


#### Reproducer

NA

#### Screenshots and Videos

Screen_recording_20240501_122505.mp4
xu3bshqb

xu3bshqb1#

⚠️缺失可复现示例
i️我们无法在您的问题报告中检测到可复现的示例。请提供以下内容:* 如果您的错误与UI相关:一个 Snack* 如果您的错误与构建/更新相关:使用我们的 Reproducer Template 。需要在您用户名下的GitHub仓库中有一个复现器。
sigwle7e

sigwle7e2#

⚠️React Native的新版本可用!
i️您正在使用受支持的次要版本,但似乎有一个更新的补丁可用 - 0.72.14。请升级到您次要版本的最高补丁或最新版本,并验证问题是否仍然存在(或者,创建一个新项目并在其中重现问题)。如果无法重现,请告知我们,以便我们关闭此问题。这有助于确保我们关注仍在最近版本中存在的问题。
70gysomp

70gysomp3#

⚠️ React Native的新版本可用!
i️ 您当前使用的是受支持的次要版本,但似乎有一个更新的补丁可用 - 0.72.14。请升级到您次要版本的最高补丁或最新版本,并验证问题是否仍然存在(或者,创建一个新项目并在其中重现问题)。如果无法重现,请告知我们,以便我们关闭此问题。这有助于确保我们关注仍在最近发布中存在的问题。
我已经尝试在新项目中使用相同的问题也发生了。

相关问题