我已经使用react-native-navigation
在React Native 0.59中设置了一些动画路线,并且我想知道如何做才能确保每个路线的动画完全相同,而与路线堆栈无关。
我已经修改了StackActions.reset()
,但是它只会负面影响我的应用程序的性能,并从整体上删除了动画,因此我选择不使用它。我认为可能缺少一些代码,或者可能需要检修整个路由系统。
我已经包含了一些我正在使用的代码:
这是我完整的NavigationManager.js
课程:
import { NavigationActions } from "react-navigation";
export default class NavigationManager {
navigator = null; // The navigator itself.
/**
* Function for setting the navigator (generally top reference).
*/
static set(ref) {
navigator = ref; // Set the navigator.
}
/**
* Function for going to the desired screen.
*/
static go(routeName, params) {
navigator.dispatch(NavigationActions.navigate( { routeName, params } ));
}
}
这是我在SwitchBoard.js
类中的实现:
const AppStack = createStackNavigator({
Portfolio : PortfolioScreen,
Home : HomeScreen,
Search : SearchScreen,
Settings : SettingsScreen,
}, {
defaultNavigationOptions : {
gesturesEnabled: false,
}, headerMode : "none",
transitionConfig : () => ({
transitionSpec : {
duration : 400,
easing : Theme.ANIMATION_EASING,
timing : Animated.timing,
}, screenInterpolator : sceneProps => {
const { layout, position, scene } = sceneProps;
const { index } = scene; // The index of the stack.
const opacity = position.interpolate({
inputRange : [index - 1, index, index + 1],
outputRange : [0, 1, 1],
});
return { opacity };
},
}),
});
const Container = createAppContainer(
createSwitchNavigator({
AppStack : AppStack,
})
);
我的Screen
类由基本的扩展本机Component
类组成。
单击初始路线(在本示例中为PortfolioScreen
路线)时,动画会遍历堆栈中的所有路线,并且在动画中可见。
这是显示该错误的.gif图像。这是我按下的最后一个按钮(在红色屏幕之后),它重置堆栈并以一种奇怪的方式进行动画处理。
谢谢。