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