如何在 React Native Android 中聚焦 TextInput

Question

I have created floatingLabelInputFocus.js

import React, { Component } from 'react';
import { View, Text, TextInput} from 'react-native';
export default class FloatingLabelInputFocus extends Component {
    state = {
        isFocused: false,
    };

    handleFocus = () => this.setState({ isFocused: true });
    handleBlur = () => this.setState({ isFocused: false });

    render() {
        const { label, ...props } = this.props;
        const { isFocused } = this.state;
        const labelStyle = {
            position: 'absolute',
            left: 0,
            top: (!isFocused&&props.value==="") ? 5 : 0,
            fontSize: !isFocused ? 25 : 20,
            color: !isFocused ? '#aaa' : '#000',
        };
        return (
            <View style={{ paddingTop: 10}}>
                <Text style={labelStyle}>
                    {label}
                </Text>
                <TextInput
                    ref={(r) => this.props.onRef(r)}
                    {...props}
                    style={{ height: 50, fontSize: 25, color: '#000', borderBottomWidth: 1, borderBottomColor: '#555', marginTop:25 }}
                    onFocus={this.handleFocus}
                    onBlur={this.handleBlur}
                />
            </View>
        );
    }
}

And I am using is as

  <FloatingLabelInputFocus
                    onRef={(r) => this.myField2 = r}
                    label="SKID CODE"
                    value={this.state.itemCode}
                    onKeyMultipleListener={() => alert('Keyboard Hidden')}
                    onChangeText={text => this.setState({ itemCode: text })}
                />

I have the reference of TextInput as this.myField2 .

However, when I do this.myField2.focus() in componentDidMount(){this.myField2.focus()} It doesn't work. What is the correct way to focus TextInput?

UPDATE:

I found the issue is with when I go to the next page and come back the focus is not working. At this time the componentDidMount() , render(), componentDidUpdate() methods are not called.

navigate('ProcessItem', { user });
in 'ProcessSkid' and from 'ProcessItem' I am doing

const navigate = navigation.navigate; 
const user = navigation.getParam('user', {}); 
navigate('ProcessSkid', { user });

At this time the TextInput is not focused.

Answer 1

It's because when you navigate to another component react-navigation doesn't unmount the component you were on, that's why it doesn't call componentDidMount .

Theres many ways to solve this

Add listeners:

<NavigationEvents
  onWillFocus={payload => console.log('will focus',payload)}
  onDidFocus={payload => console.log('did focus',payload)} // 
  onWillBlur={payload => console.log('will blur',payload)}
  onDidBlur={payload => console.log('did blur',payload)}
/>

OR

this.props.navigation.addListener('didFocus', payload=>{console.log(payload)})

And if you're using react-navigation V5 you can use this .