我正在使用react-navigation
Transitioner
来创建自定义StackNavigator
。在转换配置中使用useNativeDriver: true
时,转换动画仅在第一次运行时运行。设置为false时,它按预期工作。
注意:虽然将其设置为
false
确实解决了我的问题,但即使在生产模式下,我也会在没有它的情况下在Android上获得不稳定的性能。
以下代码段是我的导航视图
render() {
return (
<Transitioner
configureTransition={this._configureTransition}
navigation={this.props.navigation}
render={this._render}
/>
);
}
_configureTransition = () => {
return { useNativeDriver: true };
}
_render = (transitionProps) => {
return transitionProps.scenes.map(scene => this._renderScene(transitionProps, scene));
}
_renderScene = (transitionProps, scene) => {
const { layout, position } = transitionProps;
const { index } = scene;
const translateX = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [layout.initWidth, 0, 0],
});
const animationStyle = {
position: 'absolute',
width: '100%',
height: '100%',
backgroundColor: '#FFF',
transform: [{ translateX }],
};
const Scene = this.props.router.getComponentForRouteName(scene.route.routeName);
return (
<Animated.View key={scene.key} style={animationStyle}>
<Scene />
</Animated.View>
);
}
以下是问题的屏幕截图。请注意第一个过渡是如何动画的,而未来的过渡不是(“后退”导航也应该是动画的)