鍵盤解除延遲反應原生

Question

我正在構建一個反應本機應用程序，我對此相當新。 我正在使用React導航從一個頁面移動到另一個頁面。 目前，我正在使用堆棧導航器。

我有兩個屏幕，A和B.在屏幕BI中有一個使用鍵盤的搜索輸入。 當鍵盤打開時按下標題中的后退按鈕時，我導航到屏幕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();
  }

以前有人有過這個問題嗎？

Answer 1

在定義StackNavigator時嘗試傳入此選項：

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

StackNavigator(RouteConfigs, StackNavigatorConfig)

Answer 2

你可以添加

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

在您的stacknavigator定義中，不需要修改每個后退按鈕。

例如：

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