TouchableOpacity / TouchableHighlight задержка перед запуском функции в реагировать родной

Question

У меня проблема с этими двумя компонентами в React-Native, при нажатии на нее функция запускается с задержкой в ​​1-2 секунды

const ExampleComponent = (props) => {

  const _asyncFunction = async() => {
   props.startLoading() // dispatch an action
   const response = await promise();
   props.stopLoading();
   props.goToAnotherRoute(response);
  }

  return(
   <TouchableHighlight onPress={() => {_asyncFunction()}}>
      <Text>click on me</Text>
   </TouchableHighlight>
  )
}

Answer 1

Согласно документам React Native, упомянутым в https://facebook.github.io/react-native/docs/performance#my-touchablex-view-isnt-very-responsive.

Иногда, если мы выполняем действие в том же кадре, мы настраиваем непрозрачность или выделение компонента, реагирующего на прикосновениемы не увидим этот эффект, пока функция onPress не вернется. Если onPress выполняет setState, что приводит к большой работе и удалению нескольких кадров, это может произойти. Решением этой проблемы является завершение любого действия внутри вашего обработчика onPress в requestAnimationFrame:

handleOnPress() {
  requestAnimationFrame(() => {
    this.doExpensiveAction();
  });
}

Надеюсь, это поможет!