React native paper TextInput in Modal,输入一个字符后光标向后闪烁
React native paper TextInput in Modal, cursor flashes backwards after a character is input
React Native Paper 模态框上的 TextInput 有一些奇怪的行为。当我输入一个字符时,它被输入到文本框中,但随后光标闪回(好像被删除了)然后又重新出现。这一切发生得非常快,角色也得以保留,但看起来有点简陋。下面动图来说明:
模式的代码相当简单:
import { Portal, Modal, Button, Title, Text, TextInput } from 'react-native-paper';
const [nameNew, setNameNew] = useState('')
const [emailNew, setEmailNew] = useState('')
const renderModalAddPerson = () => {
return (
<Portal>
<Modal visible={visibleModalAddPerson} onDismiss={closeModalAddPerson} contentContainerStyle={styles.modalContainer}>
<View>
<Title style={{alignSelf:'center'}}>Title here</Title>
<Text> </Text>
<TextInput
mode="outlined"
label="Name"
style={{alignSelf:'center', width:'95%'}}
value={nameNew}
onChangeText={nameNew => setNameNew(nameNew)}
ref={input1}
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => input2.current.focus()}
/>
<TextInput
mode="outlined"
label="Email"
style={{alignSelf:'center', width:'95%'}}
value={emailNew}
onChangeText={emailNew => setEmailNew(emailNew)}
ref={input2}
returnKeyType='done'
blurOnSubmit={false}
onSubmitEditing={() => addPerson()}
/>
<Button
uppercase={false}
style={{backgroundColor:'#2c3e50', width: '95%', alignSelf:'center', margin: 10}}
labelStyle={{color:'white'}}
onPress={()=>addPerson()}
>Add person</Button>
</View>
</Modal>
</Portal>
);
};
问题在 iOS 上观察到但未在 Android
上测试
我唯一能看到的是,您使用与状态名称相同的变量名称来更新您的状态,这可能会导致奇怪的事情发生。
<TextInput
mode="outlined"
label="Name"
style={{alignSelf:'center', width:'95%'}}
value={nameNew}
onChangeText={val => setNameNew(val)}
ref={input1}
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => input2.current.focus()}
/>
请尝试上面的方法,因为我已经测试过了,它对我来说工作正常。
看起来这是 React Native 中的一个已知错误。我找到的最佳解决方案是使用 defaultValue 属性而不是值。
React Native Paper 模态框上的 TextInput 有一些奇怪的行为。当我输入一个字符时,它被输入到文本框中,但随后光标闪回(好像被删除了)然后又重新出现。这一切发生得非常快,角色也得以保留,但看起来有点简陋。下面动图来说明:
模式的代码相当简单:
import { Portal, Modal, Button, Title, Text, TextInput } from 'react-native-paper';
const [nameNew, setNameNew] = useState('')
const [emailNew, setEmailNew] = useState('')
const renderModalAddPerson = () => {
return (
<Portal>
<Modal visible={visibleModalAddPerson} onDismiss={closeModalAddPerson} contentContainerStyle={styles.modalContainer}>
<View>
<Title style={{alignSelf:'center'}}>Title here</Title>
<Text> </Text>
<TextInput
mode="outlined"
label="Name"
style={{alignSelf:'center', width:'95%'}}
value={nameNew}
onChangeText={nameNew => setNameNew(nameNew)}
ref={input1}
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => input2.current.focus()}
/>
<TextInput
mode="outlined"
label="Email"
style={{alignSelf:'center', width:'95%'}}
value={emailNew}
onChangeText={emailNew => setEmailNew(emailNew)}
ref={input2}
returnKeyType='done'
blurOnSubmit={false}
onSubmitEditing={() => addPerson()}
/>
<Button
uppercase={false}
style={{backgroundColor:'#2c3e50', width: '95%', alignSelf:'center', margin: 10}}
labelStyle={{color:'white'}}
onPress={()=>addPerson()}
>Add person</Button>
</View>
</Modal>
</Portal>
);
};
问题在 iOS 上观察到但未在 Android
上测试我唯一能看到的是,您使用与状态名称相同的变量名称来更新您的状态,这可能会导致奇怪的事情发生。
<TextInput
mode="outlined"
label="Name"
style={{alignSelf:'center', width:'95%'}}
value={nameNew}
onChangeText={val => setNameNew(val)}
ref={input1}
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => input2.current.focus()}
/>
请尝试上面的方法,因为我已经测试过了,它对我来说工作正常。
看起来这是 React Native 中的一个已知错误。我找到的最佳解决方案是使用 defaultValue 属性而不是值。