1

react-native-router-flux を使用してルート変更の終了アニメーションを追跡する方法はありますか? アニメーション中に読み込み中の画像をレンダリングし、アニメーションの完了時にコンポーネントをレンダリングしたい

ルーター:

    <Router>
      <Scene key="root">
        <Scene key="login" component={Login} hideNavBar/>
        <Scene key="drawer" component={Drawer} open={false} type="replace" initial>
          <Scene key="main" initial navBar={Header}>
            <Scene key="search" component={Search} type="replace" initial />
            <Scene key="map" component={Map} />
          </Scene>
        </Scene>
      </Scene>
    </Router>

検索シーンのボタン:

<Button buttonStyle={styles.button} title="map" onPress={Actions.map} />

マップ コンポーネント:

import MapView from 'react-native-maps';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>
    );
  }
}

デフォルトの左から右へのアニメーションがあり、ロード マップが原因で遅くなります。アニメーションが終了したら、マップをレンダリングする必要があります。

4

0 に答える 0