React Navigation：动画堆栈中第一张卡片的页面转换

Question

所以我正在构建一个 react-native 应用程序并使用 React-Navigation 作为我的路由器。我的一些组件需要一些精美的页面转换，因此我使用来自 React-Navigation 的组件实现了自定义转换。只要我在堆栈中有不止 1 个路由，我就可以让页面转换动画在我的导航器中工作。我注意到他们的默认导航器也存在这种模式，例如 StackNavigator、TabNavigator 等。导航器中的第一个路由似乎从来没有页面转换。例如：

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

TestScreen 和 IntroductionScreen 都将具有由堆栈导航器定义的标准幻灯片切换，但主屏幕不会。我的问题是，如何在第一个屏幕上也应用页面转换？

Answer 1

当您的应用程序最初加载时，它确实会从初始页面过渡，但是您的应用程序在从后台加载时只会加载最后一个已知屏幕。虽然不是典型的用户体验，但您可以在要转换的任何路线前面放置一个空白 'pre-screen' 以获得您想要的效果。这是组件：

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

React Navigation：动画堆栈中第一张卡片的页面转换

React Navigation: Animating the page transition of the first card in the stack

react-native

react-navigation