我已经创建了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
。
但是,当我在this.myField2.focus()
中进行componentDidMount(){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尚未聚焦。
答案 0 :(得分:0)
这是因为当您导航到另一个组件时,reaction-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)}
/>
OR
this.props.navigation.addListener('didFocus', payload=>{console.log(payload)})
如果您使用的是react-navigation
V5,则可以使用this。