反应导航:动画化堆栈中第一张卡片的页面转换
反应导航:动画化堆栈中第一张卡片的页面转换
提问于 2017-12-15 17:42:07
因此，我正在构建一个反应本地应用程序，并使用反应导航作为我的路由器。我的一些组件需要一些漂亮的页面转换，所以我使用React导航中的组件实现了一个自定义传递器。只要堆栈中有超过一个路由，我就可以让页面转换动画在我的导航器中工作。我注意到这种模式也存在于它们的默认导航器中，如StackNavigator、TabNavigator等。导航器中的第一条路径似乎从来没有页面转换。例如：
const ExampleNavigator = StackNavigator({
home: { screen: HomeScreen },
test: { screen: TestScreen },
introduction: { screen: IntroductionScreen },
})TestScreen和IntroductionScreen都有由堆栈导航器定义的标准幻灯片转换，但是主屏幕不会。我的问题是，如何也在第一个屏幕上应用页面转换？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-15 19:25:19
当您的应用程序最初加载时，它会从splash页面过渡，但是当从后台加载时，您的应用程序只会加载最后一个已知的屏幕。虽然不是一个典型的用户体验，但您可以将空白的“预屏幕”放在任何您想要过渡的路径前面，以给您想要的效果。以下是组件：
class PreScreen extends Component {
constructor(props) {
super(props);
// Immediately push the Home screen on to the stack
const { navigation } = this.props;
navigation.navigate('Home');
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#fff' }} />
)
}
}然后在您的StackNavigator中执行类似的操作，如果您希望您的主屏幕在其中转换。
const RootNavigator = StackNavigator({
PreScreen: {
screen: PreScreen,
},
Home: {
screen: HomeScreen,
navigationOptions: ({navigation}) => ({
// Note: The PreScreen will still be a valid route so I'm just hiding the back button here.
headerLeft: null
})
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47837355
复制相关文章
相似问题
腾讯云开发者
