React本机TextInput自动对焦不工作

xuo3flqw  于 2022-12-14  发布在  React
关注(0)|答案(3)|浏览(154)

我有两个屏幕在React原生应用程序说屏幕A屏幕B。一个文本输入是目前在屏幕A。我已经把自动对焦为真,它的工作最初。
当我们从屏幕A导航到屏幕B,然后从B-〉A导航回来时,textinput自动聚焦不起作用。
有没有人对此有什么想法??

<TextInput
  style={styles.textInput}
  textStyle={styles.inputTextStyle}
  autoFocus={true}
  placeholder='Enter Code'
  keyboard={'numeric'}
  placeholderTextColor={AppStyles.color.grey}
  value={code}
  onChangeText={this.updateCode}
  underline={false}
/>
ngynwnxp

ngynwnxp1#

这是因为autofocus第一次在componentDidMount上触发。要在从B导航回A后手动触发它,您必须使用withNavigationFocus HOC。因此,当用户聚焦屏幕A时,您可以使用以下代码来显示键盘。

import React from 'react';
import { Text } from 'react-native';
import { withNavigationFocus } from 'react-navigation';

class FocusStateLabel extends React.Component {
   componentDidUpdate() {
       if(this.props.isFocused){
           this.inputField.focus();
       }
   }  
   render() {
     return (
       <TextInput
         ref={(input) => { this.inputField = input; }}
         placeholder = "inputField"
       />
     )
  }
}

// withNavigationFocus returns a component that wraps FocusStateLabel and passes
// in the navigation prop
export default withNavigationFocus(FocusStateLabel);
vfh0ocws

vfh0ocws2#

自动对焦 prop 只有在组件被挂载时才会触发。当你导航回A时,如果A仍然被挂载(只是隐藏),那么自动对焦将不会再次工作。
在从B导航回A时,应该使用ref(添加一个新状态,例如此处的ref)并添加一个处理程序来触发this.state.ref.focus()

<TextInput
          ref={ref => ref && this.setState({ref})}
          style={styles.textInput}
          textStyle={styles.inputTextStyle}
          autoFocus={true}
          placeholder='Enter Code'
          keyboard={'numeric'}
          placeholderTextColor={AppStyles.color.grey}
          value={code}
          onChangeText={this.updateCode}
          underline={false}
        />
icomxhvb

icomxhvb3#

基于Jarret的注解(V6不赞成使用withNavigationFocus)和此StackOverflow答案(Can't focus TextInput when navigating to a screen):

import {useFocusEffect} from 'react-navigation/native';

const TestFocus = (props) => {

  const textRef = useRef(null);

  useFocusEffect(
    useCallback(() => {
     // When the screen is focused
     const focus = () => {
      setTimeout(() => {
       textRef?.current?.focus();
      }, 1);
     };
     focus();
     return focus; // cleanup
    }, []),
  );

  return (
   <TextInput
     ref={textRef}
   />
  )
  
}

相关问题