Сосредоточьте навигацию, фокусируется на входных размытиях сразу, когда возвращаетесь к предыдущему экрану - PullRequest
Новая
       34

Сосредоточьте навигацию, фокусируется на входных размытиях сразу, когда возвращаетесь к предыдущему экрану

0 голосов
/ 06 апреля 2020

Я хочу сосредоточиться на вводе текста при переходе на новый экран. Это работает, когда я добавляю экран в стек, но не когда я go возвращаюсь в стек.

Вместо этого ввод фокусируется на секунду и сразу размывается.

Вот что Я получаю:

  • Экран A находится первым в стеке, и ввод сразу размывается
  • Экран B добавляется в стек и работает как положено

enter image description here

Любая идея, что вызывает это?

К вашему сведению, у меня та же проблема, если я использую автофокус.

Вот все ( довольно просто) код: 

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as React from "react";
import { TextInput, View, Button, Text } from "react-native";

function ScreenA({ navigation }) {
    const textInputRef = React.useRef();

    const focusOnInput = e => {
        textInputRef.current.focus();
    };

    navigation.addListener("focus", focusOnInput);
    return (
        <View>
            <Text>SCREEN A</Text>
            <TextInput ref={textInputRef} />
            <Button title="Go to screen B" onPress={() => navigation.navigate("ScreenB")} />
        </View>
    );
}

function ScreenB({ navigation }) {
    const textInputRef = React.useRef();

    const focusOnInput = e => {
        textInputRef.current.focus();
    };

    navigation.addListener("focus", focusOnInput);

    return (
        <View>
            <Text>SCREEN B</Text>
            <TextInput ref={textInputRef} />
            <Button title="Go to screen A" onPress={() => navigation.navigate("ScreenA")} />
        </View>
    );
}

const Stack = createStackNavigator();

function TestComp() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen component={ScreenA} name="ScreenA" />
                <Stack.Screen component={ScreenB} name="ScreenB" />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default TestComp;
...