React Native：打开Modal时TextInput是否可以保持焦点？答案

【问题标题】：React Native: Is it possible to TextInput keep on focus when the Modal is opened?React Native：打开Modal时TextInput是否可以保持焦点？
【发布时间】：2021-03-01 08:35:05
【问题描述】：

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

我知道这不正常，但情况迫使我这样做。

如果您有解决此类问题的经验，请帮助我。

【问题讨论】：

TextInput 会是模态的吗？
没有。 TextInput 必须在 Modal 之外。
如果Modal 打开，那么输入将如何成为焦点？请分享一些参考视图
是的，这就是我要问的。您是否认为一旦打开Modal 就不可能聚焦TextInput？

标签： react-native keyboard modal-dialog react-native-textinput

【解决方案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%',
  },
});

【讨论】：

【解决方案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>
  );
}

【讨论】：