Question

所以我正在构建一个本机应用程序并使用React-Navigation作为我的路由器。我的一些组件需要一些奇特的页面转换，所以我使用React-Navigation中的Component实现了一个自定义转换器。只要我在堆栈中有多条路线，我就可以在我的导航器中使用页面过渡动画。我注意到它的默认导航器也存在这种模式，例如StackNavigator，TabNavigator等。导航器中的第一条路径似乎永远不会有页面转换。例如：

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

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

Answer 1

当您的应用最初加载时，它会从启动页面转换，但是您的应用只会在从后台加载时加载最后一个已知屏幕。虽然不是典型的用户体验，但您可以在屏幕前放置一个空白的屏幕。在您要转换的任何路线前面，为您提供所需的效果。这是组件：

Comparable

然后在StackNavigator中执行类似这样的操作，如果您希望主屏幕转换。

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' }} />
    )
  }
}

反应导航：动画堆栈中第一张卡片的页面转换

1 个答案: