Question

我在react-native中有一个正在使用堆栈导航器的页面。当我单击TextInput时，它将获得焦点，并在几秒钟后自动丢失。这样会自动隐藏键盘，从而打断我的文字输入。

当我将页面放在堆栈导航器顶部时，它不会失去焦点，但是在我再次将其放在某些页面下面之后，它又开始失去焦点。

App.js

const AppStackNavigator = createStackNavigator({
  SplashScreen: {screen: SplashScreen},
  Carousel: {screen: CarouselScreen},
  Test: {screen: Test},
},
{
  transitionConfig
});

const AppDrawerNavigator = createDrawerNavigator({
  Home: AppStackNavigator
});

const AppContainer = createAppContainer(AppDrawerNavigator);

Test.js

import React, {Component} from 'react';
import {View, TextInput, StyleSheet, ScrollView} from 'react-native';

export default class Test extends Component {
    render() {
        return (
          <View style={styles.container}>
              <TextInput style={styles.test} placeholder={"Test"} onBlur={() => console.log("Input Blurred!")} blurOnSumbit={false}/>
          </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignContent: 'center',
        justifyContent: 'center'
    },
    test: {
        height: 100,
        width:200,
        borderColor: '#000000',
        borderWidth: 2
    }
});

TextInput不应失去焦点，因此键盘不应隐藏。

Answer 1

您需要做的就是使用输入的ref prop，然后onBlur使其保持焦点，如下所示：

 <TextInput 
    style={styles.test} 
    placeholder={"Test"} 
    ref={refs => this.inputRef = refs}
    onBlur={this.keepFocus} 
    blurOnSumbit={false}
/>

keepFocus = () => {
    this.inputRef.focus()
}

如果您希望将集中的输入作为组件安装，请执行以下操作：

componentDidMount() {
   this.keepFocus()
}

希望对您有帮助。

登录/注册页面中的TextInput自动失去焦点

1 个答案: