React Native:当Modal打开时，TextInput是否可以保持焦点

Question

打开Modal时，我需要将输入文本保留在TextInput中。仅供参考，TextInput不是Modal的子组件

我知道这不正常，但形势迫使我这么做。

如果你有解决这类问题的经验，请帮帮我。

Answer 1

使用可以使用Ref对象来集中每次模式显示时输入的文本

检查此代码，，，

export default function App() {
const [visible, setVisible] = React.useState(false);
const input = React.createRef();
React.useEffect(() => {
if (visible) {
input.current.focus();
}
}, [visible]);
return (
<View style={styles.container}>
<Button
title="Click"
onPress={() => {
setVisible(true);
}}
/>
<Modal
visible={visible}
onRequestClose={() => {
setVisible(false);
}}>
<View style={styles.modal}>
<TextInput ref={input} />
</View>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
modal: {
width: '100%',
height: '100%',
},
});

Answer 2

使用这种方式

CustomModal.js

const CustomModal = React.forwardRef((props, ref) => (
React.useEffect(() => {
ref.current.focus();
}, []);
return (
<Modal isActive={props.isActive}>
<ModalClose onClick={props.handleClose} />
</Modal>
)
))

App.js

export default function App() {
const [visible, setVisible] = React.useState(false);
const input = React.createRef();

return (
<View >
<TextInput ref={input} /> // Create textinput outside here
<Button
title="Click"
onPress={() => {
setVisible(true);
}}
/>
<CustomModal    
isActive={visible} 
handleClose={()=>{}} 
ref={input}
/> 
</View>
);
}