键盘关闭延迟反应本机答案

【问题标题】：Delay in keyboard dismiss react-native键盘关闭延迟反应本机
【发布时间】：2018-02-15 02:49:53
【问题描述】：

我正在构建一个 React Native 应用程序，我对此很陌生。我正在使用React navigation 从一页移动到另一页。目前，我正在使用堆栈导航器。

我有两个屏幕，A 和 B。在屏幕 B 中，我有一个使用键盘的搜索输入。当在键盘打开时按下标题中的后退按钮时，我导航到屏幕 A，但在键盘关闭之前存在显着延迟。我已经把 Keyboard.dismiss();在屏幕 B 中的 componentWillUnmount 和屏幕 A 中的 componentWillMount 中。不确定如何或是否可以将 onClick 事件添加到后退按钮，因为我相信它在标题组件内。

  export default class Locations extends Component {
   static navigationOptions = {
     title: 'Search Location',
   } 

  renderHeader = () => {
    return <SearchBar onChangeText={(text) =>this.handleSearch(text)} 
      placeholder="Type Here..." lightTheme round />;
  }
  componentWillUnmount(){
    Keyboard.dismiss();
  }

以前有人遇到过这个问题吗？

【问题讨论】：

尝试在按下后退按钮而不是在生命周期事件中调用Keyboard.dismiss()。它应该可以解决延迟问题。

标签： javascript reactjs react-native

【解决方案1】：

在定义 StackNavigator 时尝试传入此选项：

const StackNavigatorConfig = {
  navigationOptions: {
    header: ({ goBack }) => {
      const goBackAndDismissKeyboard = (ev) => {
          Keyboard.dismiss()
          return goBack(ev)
      } 
      return { left: <Left onPress={goBackAndDismissKeyboard} />}
    },
  }
}

StackNavigator(RouteConfigs, StackNavigatorConfig)

【讨论】：

【解决方案2】：

你可以添加

onTransitionStart: () => Keyboard.dismiss(),

在您的 stacknavigator 定义中，不需要修改每个后退按钮。

例如：

const mainScreen = createStackNavigator(
  {
    MainScreen: {
      screen: MainScreen,
    }
  },
  {
    onTransitionStart: () => Keyboard.dismiss(),
    initialRouteName: 'MainScreen'
  }
);

【讨论】：