React Native Paper TextInput in Modal,输入字符后光标向后闪烁
Posted
技术标签:
【中文标题】React Native Paper TextInput in Modal,输入字符后光标向后闪烁【英文标题】:React native paper TextInput in Modal, cursor flashes backwards after a character is input 【发布时间】:2021-03-03 09:22:49 【问题描述】:React Native Paper 中 Modal 上的 TextInput 的一些奇怪行为。当我键入一个字符时,它被输入到文本框中,但随后光标又闪回(好像它被删除了),然后又重新出现。这一切都发生得很快,角色被保留了下来,但看起来有点笨拙。下面的GIF来说明:
模态的代码相当简单:
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>
);
;
【问题讨论】:
你所在的州是哪里?它只是从您的 sn-p 中丢失了吗?因为我以前见过这个,输入没有任何状态 抱歉,sn-p 错过了。我现在已将状态包含在 sn-p 中。 这是“正常”行为。建议您使用不受控制的行为。这意味着您省略 value=emailNew 并仅在 addPerson() 中检索 emailNew。这允许您使用双空格(句点 .)行为也。 【参考方案1】:看起来这是 React Native 中的一个已知错误。我发现的最佳解决方案是使用 defaultValue 属性而不是 value。
【讨论】:
【参考方案2】:我唯一能看到的是,您使用与状态名称相同的变量名称来更新您的状态,这可能会导致一些奇怪的事情发生。
<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 Paper TextInput in Modal,输入字符后光标向后闪烁的主要内容,如果未能解决你的问题,请参考以下文章
减少 react-native-paper TextInput 的高度和垂直填充
无法从“screens\SignUpScreen.js”解析“react-native-paper/lib/typescript/src/components/MaterialCommunityIco
无法在 React Native Paper 中更改卡片标题文本的颜色