React Native文本输入。每输入字符时,文本会跳动。

huangapple go评论59阅读模式
英文:

React native text input. Text jumps whenever characters are entered into the input

问题

以下视频解释了发生了什么。这是文本输入代码。我已经尝试了scrollenabled=false。欢迎任何想法。

<TextInput
    placeholder={'想谈谈什么?'}
    placeholderTextColor={'#9A9A9A'}
    onChangeText={onChangeText}
    multiline={true}
    autoFocus={true}
    scrollEnabled={true}
    style={[styles.textInputPost, postVideoUri.length > 0 || postImage.length > 0 ? { height: '20%' } : {}]}
/>
英文:

The following video explains what is going on https://www.loom.com/share/c9144a0877b1460c8c02c301afdc3029
There is a noticeable jump in the text when the text is entered. This is what the code for the text input looks like. i already tried scrollenabled=false. Any ideas would be welcome.

 <TextInput
        placeholder={'What do you want to talk about?'}
        placeholderTextColor={'#9A9A9A'}
        onChangeText={onChangeText}
        multiline={true}
        autoFocus={true}
        scrollEnabled={true}
        style={[styles.textInputPost, postVideoUri.length > 0 || postImage.length > 0 ? { height: '20%' } : {}]}
      />

答案1

得分: 2

可能是因为你使用了useState钩子来管理状态,导致了一些重新渲染,这可能就是原因。也许可以尝试像这样做:

  const [postText, setPostText] = useState('');
  const [postVideoUri, setPostVideoUri] = useState('');
  const [postImage, setPostImage] = useState('');

  const onChangeText = useCallback((text) => {
    setPostText(text);
  }, []);

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="你想谈些什么?"
        placeholderTextColor="#9A9A9A"
        onChangeText={onChangeText}
        multiline
        autoFocus
        scrollEnabled
        style={[
          styles.textInputPost,
          postVideoUri.length > 0 || postImage.length > 0 ? { height: '20%' } : {},
        ]}
      />
    </View>
  );
英文:

Probably, because you are using useState hook to manage the state, some re-renders happen and that is why that happens. Maybe try something like this:

  const [postText, setPostText] = useState(&#39;&#39;);
  const [postVideoUri, setPostVideoUri] = useState(&#39;&#39;);
  const [postImage, setPostImage] = useState(&#39;&#39;);

  const onChangeText = useCallback((text) =&gt; {
    setPostText(text);
  }, []);

  return (
    &lt;View style={styles.container}&gt;
      &lt;TextInput
        placeholder=&quot;What do you want to talk about?&quot;
        placeholderTextColor=&quot;#9A9A9A&quot;
        onChangeText={onChangeText}
        multiline
        autoFocus
        scrollEnabled
        style={[
          styles.textInputPost,
          postVideoUri.length &gt; 0 || postImage.length &gt; 0 ? { height: &#39;20%&#39; } : {},
        ]}
      /&gt;
    &lt;/View&gt;
  );

答案2

得分: 1

它会表现得这样,是因为你可能在更改时直接调用了 setState() 函数,这会导致每次编辑文本输入内容时都触发重新渲染。对于文本输入,我建议使用 React-Hook-Form 库,并使用 Controller 使其成为受控输入;然后它应该可以正常工作。

英文:

It behaves like that because you are probably calling the setState() function directly on change, which triggers a re-render every time you edit text input content. For text inputs, I recommend to use the React-Hook-Form library and use Controller to make it controlled input; then it should work fine.

答案3

得分: 0

好的,我将翻译代码部分:

1. 使用 useCallback() 用于 onchangeText 函数。
2. 为 textInput 字段提供一个宽度组件。这对解决方案至关重要。拥有这两个要素,它将不会跳动。

  textInputPost: {
    fontFamily: 'Montserrat',
    fontSize: 18,
    lineHeight: 30,
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    height: '38%',
    **width: windowWidth - 40,**
    paddingRight: 20,
  },
英文:

ok so i found a solution. it has two components.

  1. use useCallback() for onchangeText function.

  2. provide a width component for the textInput field. That is critical for the solution to work. With both of these things, it will not jump.

     textInputPost: {
    fontFamily: &#39;Montserrat&#39;,
    fontSize: 18,
    lineHeight: 30,
    alignItems: &#39;flex-start&#39;,
    justifyContent: &#39;flex-start&#39;,
    height: &#39;38%&#39;,
    **width: windowWidth - 40,**
    paddingRight: 20,
    

    },

huangapple
  • 本文由 发表于 2023年4月19日 14:50:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76051498.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定