React导航:对堆栈中第一张卡的页面过渡进行动画化

Question

因此，我正在构建一个反应的应用程序，并使用React-Navigation作为我的路由器。我的一些组件需要一些精美的页面过渡，因此我使用React-Navigation的组件实现了一个自定义过渡器。只要我在堆栈中有1个以上的路线，我就可以将页面过渡动画在导航器中工作。我注意到它们的默认导航器也存在此模式，例如StackNavigator，TabNavigator等。导航器中的第一个路线似乎从未有页面过渡。例如：

const ExampleNavigator = StackNavigator({
  home: { screen: HomeScreen },
  test: { screen: TestScreen },
  introduction: { screen: IntroductionScreen },
})

测试屏幕和介绍屏幕都将具有由堆栈导航器定义的标准幻灯片过渡，但主屏幕不会。我的问题是，我还可以在第一个屏幕上应用页面过渡？

Answer 1

当您的应用程序最初加载时，它确实会从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' }} />
    )
  }
}

然后，如果您希望主屏幕过渡。

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
    })
  }
});