你好,我注意到在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
3条答案
按热度按时间xu3bshqb1#
sigwle7e2#
70gysomp3#
⚠️ React Native的新版本可用!
i️ 您当前使用的是受支持的次要版本,但似乎有一个更新的补丁可用 - 0.72.14。请升级到您次要版本的最高补丁或最新版本,并验证问题是否仍然存在(或者,创建一个新项目并在其中重现问题)。如果无法重现,请告知我们,以便我们关闭此问题。这有助于确保我们关注仍在最近发布中存在的问题。
我已经尝试在新项目中使用相同的问题也发生了。