如何在 React Native 中聚焦 TextInput Android

Question

我创建了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>
        );
    }
}

我用的是

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

我有 TextInput 的引用 this.myField2。

但是，当我在 componentDidMount(){this.myField2.focus()} 中执行 this.myField2.focus() 时，它不起作用。聚焦 TextInput 的正确方法是什么？

更新：

我发现问题在于当我转到下一页并返回时焦点不起作用。此时 componentDidMount() 、 render() 、 componentDidUpdate() 方法没有被调用。

navigate('ProcessItem', { user });
在 'ProcessSkid' 和 'ProcessItem' 我正在做

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

此时TextInput没有获得焦点

Answer 1

这是因为当您导航到另一个组件时 react-navigation 没有卸载您所在的组件，这就是它不调用 componentDidMount.

的原因

有很多方法可以解决这个问题

添加听众：

<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)}
/>

或

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

如果您使用的是 react-navigation V5，则可以使用 this。

如何在 React Native 中聚焦 TextInput Android

How to Focus TextInput in React Native Android

javascript

reactjs

react-native

react-native-android