Comme je vois, vous créez un composant à l'intérieur du composant et l'utilisez.

Cependant, puisque vous avez créé un composant fonctionnel à l'intérieur du composant, il sera recréé à chaque fois qu'une mise à jour d'état se produit.

Une meilleure option consiste à déplacer le CustomTextInput hors de l'écran ou de tout composant ayant un état.

Par exemple :

import React, { useState } from 'react'; import { View, StyleSheet } from 'react-native'; import { TextInput } from 'react-native'; const CustomTextInput = ({ value, onChangeText, placeholder, style }) => { return (  ); }; const App = () => { const [inputValue, setInputValue] = useState(''); const handleTextChange = (text) => { setInputValue(text); }; return (     ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', }, textInput: { width: '80%', height: 40, borderWidth: 1, borderColor: 'gray', padding: 10, }, }); export default App;

Placez votre composant dans une fonctionApp函数之外，或者更好的方法是为其创建一个单独的文件，因为如果您将其放在内部，当您编写文本useState hook重新渲染Apppour le refléter sur l'interface utilisateur, cela fera perdre le focus à votre composant.

Code fixe :

import React, { useState } from 'react'; import { View, StyleSheet } from 'react-native'; import { TextInput } from 'react-native'; const CustomTextInput = ({ value, onChangeText, placeholder, style,...other }) => { return (  ); }; const App = () => { const [inputValue, setInputValue] = useState(''); const handleTextChange = (text) => { setInputValue(text); }; return (     ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', }, textInput: { width: '80%', height: 40, borderWidth: 1, borderColor: 'gray', padding: 10, }, }); export default App;