react-native - React Native：打开模态时TextInput是否可以保持焦点？

Question

我需要在打开时保留输入TextInput文本Modal。仅供参考，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>
  )
))

应用程序.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>
  );
}