1

を使用してreact-native-popup-menu、独自のrendererコンポーネントを作成しました。これは機能コンポーネントなので、要するに次のようになります。

const ContextMenuRenderer = ({ children, layouts, ...otherProps }) => {
  return (
    <Animated.View
      {...otherProps}
      onLayout={handleViewLayout}
      style={[styles.viewStyle, viewAnimations]}
    >
      {children}
    </Animated.View>
  );
}

viewAnimationsオープニング アニメーションが含まれています。コードは比較的大きいですが、このスナックで確認できます。

ドキュメントには、「非同期の終了アニメーションを処理するために、close()メニューが閉じる前に呼び出されるメソッドをレンダラーで実装できます。close メソッドは を返す必要があります。Promise」と書かれています。

ContextMenu コードを読みました。これはクラス コンポーネントであり、次のように実装close()します。

close() {
  return new Promise(resolve => {
    Animated.timing(this.state.scaleAnim, {
      duration: CLOSE_ANIM_DURATION,
      toValue: 0,
      easing: Easing.in(Easing.cubic),
      useNativeDriver: USE_NATIVE_DRIVER,
    }).start(resolve);
  });
}

関数コンポーネント内に同様のものを実装しようとしましたが、コードが実行されません。うまくいかないと思ったのですが、閉じるときにアニメーションを作成するにはどうすればよいですか? フェードアウトのアニメーションを作りたかったのです。

function close() {
  console.log('close'); // It isn't logged
  return new Promise((resolve) => {
    console.log('resolve close');
  });
}
4

1 に答える 1