如何在 NativeScript 中使用页面转换

Question

我正在尝试使用routerExtensions中的页面转换的页面转换但没有成功。(2.3.0)

我在js中尝试过：

this.routerExtensions.navigate(
    [
        'myPage'
    ], 
    {
        animated: true, 
        transition: 
        {
            name: 'flip', 
            duration: 2000, 
            curve: 'linear'
        }
    } 
);

我在 xml 中尝试过：

<Button text="Goto myPage" [nsRouterLink]="['/myPage']" pageTransition="flip"></Button>

当我导航到“myPage”但没有动画时，这两种方法都有效。我是否需要更改设置才能“启用”动画，或者我是否遗漏了一些明显的东西？

Answer 1

根据所提供的上下文，很难确切地说出它不起作用的原因。

您真正需要做的就是：

设置您要路由到的组件：

app-routing.module.ts

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/home' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

使用您的组件将本机路由器扩展注入到组件中router-outlet

app.component.ts

import { RouterExtensions } from "@nativescript/angular/router";

@Component({
    selector: "ns-app",
    templateUrl: "./app.component.html"
})
export class AppComponent {
  constructor(private routerExtensions: RouterExtensions) {}

  public navigate(link: string): void {
    this.routerExtensions.navigate([link], {
      animated: true,
      transition: { name: 'slide' }
    });
  }
}

当然还有调用这个方法的方法 app.component.ts

<StackLayout>
  <FlexboxLayout>
    <Button text="Home" (tap)="navigate('home')"></Button>
    <Button text="About" (tap)="navigate('about')"></Button>
    <Button text="Contact" (tap)="navigate('contact')"></Button>
  </FlexboxLayout>
  <StackLayout>
    <page-router-outlet actionBarVisibility="never"></page-router-outlet>
  </StackLayout>
</StackLayout>

我已经设置了一个工作存储库，在这里演示了这一点https://github.com/gsavchenko/nativescript-page-transitions。这些也可以在不使用 nativescript 本机路由 API 的情况下以角度实现。

干杯，如果还有其他问题，请告诉我。

Answer 2

看看 NativeScript 的 Groceries 应用程序，它是所有 NativeScript 组件的重要资源 - https://github.com/NativeScript/sample-Groceries。你可以在里面找到他们给出的过渡动画。

祝你好运。如果需要任何帮助请询问。