英文:
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('');
const [postVideoUri, setPostVideoUri] = useState('');
const [postImage, setPostImage] = useState('');
const onChangeText = useCallback((text) => {
setPostText(text);
}, []);
return (
<View style={styles.container}>
<TextInput
placeholder="What do you want to talk about?"
placeholderTextColor="#9A9A9A"
onChangeText={onChangeText}
multiline
autoFocus
scrollEnabled
style={[
styles.textInputPost,
postVideoUri.length > 0 || postImage.length > 0 ? { height: '20%' } : {},
]}
/>
</View>
);
答案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.
-
use useCallback() for onchangeText function.
-
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: 'Montserrat', fontSize: 18, lineHeight: 30, alignItems: 'flex-start', justifyContent: 'flex-start', height: '38%', **width: windowWidth - 40,** paddingRight: 20,},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论