键盘解除延迟反应原生

时间:2017-09-06 14:41:36

标签: javascript reactjs 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();
  }

之前有人遇到过这个问题吗?

2 个答案:

答案 0 :(得分:2)

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

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

StackNavigator(RouteConfigs, StackNavigatorConfig)

答案 1 :(得分:0)

您可以添加

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

使用您的stacknavigator定义,无需修改每个后退按钮。

例如:

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