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>
    );
  ;

ios 上观察到的问题,未在 android 上测试过

【问题讨论】:

你所在的州是哪里?它只是从您的 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 中更改卡片标题文本的颜色

React Native Paper 按钮不会触发 onpress

React Native 明文多个 TextInput 框

React Native Paper TextInput in Modal,输入字符后光标向后闪烁