NativeScript / NativeScript/angular
TabView not rendering
還沒有人認領這個 Issue。
- 主要語言
- TypeScript
- 星號
- 55
- 分支
- 13
- 平均合併
- 16 分鐘
- 30 天內合併 PR
- 1
描述
Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
{
"name": "stackblitz-nativescript-angular",
"main": "./src/main.ts",
"version": "1.0.0",
"private": true,
"dependencies": {
"@angular/animations": "~19.0.0",
"@angular/common": "~19.0.0",
"@angular/compiler": "~19.0.0",
"@angular/core": "~19.0.0",
"@angular/forms": "~19.0.0",
"@angular/platform-browser": "~19.0.0",
"@angular/platform-browser-dynamic": "~19.0.0",
"@angular/router": "~19.0.0",
"@nativescript/angular": "^19.0.0",
"@nativescript/core": "~8.8.0",
"rxjs": "~7.8.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~19.0.0",
"@angular/compiler-cli": "~19.0.0",
"@nativescript/preview-cli": "^1.0.14",
"@nativescript/stackblitz": "^0.0.8",
"@nativescript/tailwind": "^2.1.0",
"@nativescript/types": "~8.8.0",
"@nativescript/webpack": "~5.0.0",
"@ngtools/webpack": "~19.0.0",
"tailwindcss": "~3.4.0",
"typescript": "~5.6.0"
}
}
Describe the bug
Adding TabView UI component doesn't render on the page.
To Reproduce
Start new project by following the docs: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular. or use this stackblitz:
https://stackblitz.com/edit/nativescript-stackblitz-templates-t6bujanb?file=src%2Fapp%2Fitem%2Fitems.component.html,src%2Fapp%2Fitem%2Fitems.component.ts,src%2Fapp%2Fapp.routes.ts&title=NativeScript%20Starter%20Angular
Modify items.component.html
<ActionBar title="My App"> </ActionBar>
<GridLayout>
<TabView>
<TabViewItem title="First">
<Label
text="First Tab Content"
textAlignment="center"
verticalAlignment="center"
></Label>
</TabViewItem>
<TabViewItem title="Second">
<Label
text="Second Tab Content"
textAlignment="center"
verticalAlignment="center"
></Label>
</TabViewItem>
<TabViewItem title="Third">
<Label
text="Third Tab Content"
textAlignment="center"
verticalAlignment="center"
></Label>
</TabViewItem>
</TabView>
</GridLayout>
Expected behavior
Tab views to load like the bellow:
Sample project
Additional context
貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
研究方向
從連結的 StackBlitz 和 src/app/item/items.component.html 中的重現開始,然後將其與 master-detail Angular 教學進行比較。使用列出的 Angular 和 NativeScript 版本執行範例,並追蹤 TabView 未出現的原因。當三個分頁如預期圖片所示呈現其標籤和內容時,即表示完成。
由索引模型根據 Issue 內容生成。
評估
- 技術堆疊
- angular, typescript
- 領域
- frontend, mobile
- Issue 類型
- 缺陷
- 難度
- 3/5
- 預估耗時
- 1-2 天
- 活躍度
- 停滯
- 描述清晰度
- 描述清楚
- 新手友好度
- 45/100