TextInput на странице входа / регистрации автоматически теряет фокус

Question

У меня есть страница в Reaction-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()
}

Надеюсь, это поможет вам.