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

根据https://facebook.github.io/react-native/docs/performance#my-touchablex-view-isnt-very-responsive中提到的React Native文档。

有时候，如果我们在调整的同一帧中执行一项操作响应触摸的组件的不透明度或高光，直到onPress函数具有回到。如果onPress执行setState会导致大量工作，并且丢了几帧，可能会发生这种情况。解决方案是包装您在requestAnimationFrame中的onPress处理程序内部的任何操作：
handleOnPress() {
  requestAnimationFrame(() => {
    this.doExpensiveAction();
  });
}

我希望这会有所帮助！

在React-Native中启动功能之前的TouchableOpacity / TouchableHighlight延迟

1 个答案: