【问题标题】：React Native: After Navigate Push, First Focus TextInput Flashing Out KeyboardReact Native：导航推送后，首先关注 TextInput 闪出键盘
【发布时间】：2020-07-02 09:44:03
【问题描述】：

在我真正的 Android 设备上，将屏幕推入堆栈导航后聚焦 TextInput 会使键盘闪烁一次（出现然后立即消失）。这不会在重新聚焦时发生，但如果我向后导航并使用其中包含 TextInputs 的任何屏幕重新推送导航，则会再次发生。

这不会发生：

在 Android 模拟器中
如果我使用navigation.navigate('...')

下面的这些代码和我的设备上运行的完全一样，只是简单的代码，没有花哨的东西。

App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import CategoryScreen from './screens/Category';

const MyStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <MyStack.Navigator>
        <MyStack.Screen name="Category" component={CategoryScreen} />
      </MyStack.Navigator>
    </NavigationContainer>
  );
}

Category.js

import React from 'react';
import { View, TextInput, Button } from 'react-native';

export default function Category({ navigation }) {
  function goToAnotherCategory() {
    navigation.push('Category');
  }

  return (
    <View>
      <Button onPress={goToAnotherCategory} title="Go to Another Category" />
      <TextInput style={{ margin: 10, borderWidth: 1, backgroundColor: 'white' }} />
    </View>
  )
}

我正在使用这些版本：

"dependencies": {
  ...
  "@react-navigation/native": "^5.5.1",
  "@react-navigation/stack": "^5.5.1",
  "react": "16.11.0",
  "react-native": "0.62.2"
  ...
}

【问题讨论】：

也许试试<TextInput autoFocus={true} ... />让它自动对焦？
autoFocus 的作用就像我们点击输入一样，它会闪烁一次。

标签： javascript android react-native

【解决方案1】：

解决方案 1：

在我们最新版本的react-navigation 上也发生了这种情况。

作为一种解决方法，我们禁用了整个堆栈的键盘处理，将 keyboardHandlingEnabled 属性设置为 false。更多信息在这里：https://reactnavigation.org/docs/stack-navigator/#keyboardhandlingenabled

所以现在它工作得很好。 :)

解决方案 2：

在终端上运行这些命令

watchman watch-del-all
rm -rf node_modules && yarn

解决方案 3：

这也是由于版本兼容性。如果您使用的是 expo，请通过 expo CLI 安装这两个包

expo install @react-navigation/native
expo install @react-navigation/stack

【讨论】：

正在关闭我的键盘，即使输入应该保持焦点并显示键盘。禁用处理该区域的键盘很有魅力，干杯:)

【解决方案2】：

更新到最新：

npm install @react-navigation/native（目前更新到 v5.7.3）
npm install @react-navigation/stack（目前更新到v5.9.0）

我不确定哪一个解决了这个问题。我都做了，现在可以了。

【讨论】：