React Native: 导航推送后，第一个焦点TextInput会闪烁弹出键盘

Question

在我的真实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"
  ...
}

- Jeaf Gilbert

---

也许尝试使用 <TextInput autoFocus={true} ... /> 让它自动聚焦？ - 高鵬翔

autoFocus 的作用和我们点击输入框一样，会闪烁一次。 - Jeaf Gilbert

Answer 1

解决方案 1：

我们在最新版本的react-navigation中也遇到了这个问题。

作为一种解决方法，我们将整个 stack 的键盘处理禁用，将 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

- Muhammad Numan

---

尽管输入键盘仍然显示，但我的键盘一直在关闭。禁用该区域的键盘处理功能非常有效，感谢 :) - MMachinegun

Answer 2

更新到最新版本：

• npm install @react-navigation/native（当前已更新至v5.7.3）
• npm install @react-navigation/stack（当前已更新至v5.9.0）

我不确定哪个修复了问题。我都执行了一遍，现在它可以正常工作了。

- Jeaf Gilbert