developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhaojunkai
4f047650 2 parents a78525d6 c8955c68

Merge remote-tracking branch 'origin/main'

Inline Side-by-side
Showing 11 changed files with 184 additions and 357 deletions
/**
* 点赞、已读、分享数量
*/
export interface InteractDataDTO {
collectNum: number;
commentNum: number;
contentType: number;
likeNum: number;
readNum: number;
shareNum: number;
contentId: string;
}
... ...
... ... @@ -23,6 +23,7 @@ export struct MultiPictureDetailItemComponent {
.width('100%')
.aspectRatio(this.MultiPictureDetailItem.width / this.MultiPictureDetailItem.height)
.objectFit(ImageFit.Fill)
.interpolation(ImageInterpolation.High)
}
.height('100%')
.width('100%')
... ...
... ... @@ -13,15 +13,14 @@ const LOCAL_CHANNEL: string = '地方频道'
struct ChannelDialog {
@State indexSettingTabIndex: number = 1
@State isEditIng: boolean = false
@Link currentTopNavSelectedIndex : number
@Link myChannelList: Array<TopNavDTO>
@Link moreChannelList: Array<TopNavDTO>
@Link localChannelList: Array<TopNavDTO>
@Link indexSettingArray: Array<string>
@Link topNavList: Array<TopNavDTO>
@Link currentTopNavSelectedIndex: number
@Link myChannelList: TopNavDTO[]
@Link moreChannelList: TopNavDTO[]
@Link localChannelList: TopNavDTO[]
@Link indexSettingArray: string[]
controller?: CustomDialogController
myChannelItemEditHandle = (index: number): void => {
let item = this.myChannelList.splice(index, 1)[0]
console.info(`itemitemitem${JSON.stringify(item)}`)
if (item.moreChannel === '1') {
this.moreChannelList.unshift(item)
}
... ... @@ -29,7 +28,6 @@ struct ChannelDialog {
this.localChannelList.unshift(item)
}
}
controller?: CustomDialogController
build() {
Column() {
... ... @@ -108,7 +106,7 @@ struct ChannelDialog {
Row() {
Text(item.name)
.fontSize(14)
.fontColor( this.currentTopNavSelectedIndex === index ? '#ED2800' : (item.homeChannel === '1' ? '#999999' : '#222222'))
.fontColor(this.currentTopNavSelectedIndex === index ? '#ED2800' : (item.homeChannel === '1' ? '#999999' : '#222222'))
if (this.isEditIng && item.myChannel !== '1') {
Image($r('app.media.icon_audio_close'))
... ... @@ -122,10 +120,11 @@ struct ChannelDialog {
.backgroundColor(item.homeChannel === '1' ? '#F5F5F5' : '')
.onClick(() => {
if (this.isEditIng) {
if(item.myChannel !== '1'){
if (item.myChannel !== '1') {
this.myChannelItemEditHandle(index)
}
}else{
} else {
this.currentTopNavSelectedIndex = index
this.controller?.close()
}
})
... ... @@ -234,306 +233,35 @@ struct ChannelDialog {
.padding(16)
.backgroundColor('#ffffff')
}
onTopNavigationDataUpdated() {
}
}
@Entry
@Component
struct ChannelSubscriptionLayout {
@State indexSettingArray: string [] = ['推荐', '热点']
//当前选中的频道
@Prop currentTopNavSelectedIndex?: number;
@Link currentTopNavSelectedIndex: number;
@Link myChannelList: TopNavDTO []
@Link moreChannelList: TopNavDTO []
@Link localChannelList: TopNavDTO []
@State indexSettingArray: Array<string> = ['推荐', '热点']
@State myChannelList: Array<TopNavDTO> = [
// {
// channelId: 0,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '1',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '推荐',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 1,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '1',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '热点',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 2,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '视频',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 3,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '1',
// name: '云课堂',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
]
@State moreChannelList: Array<TopNavDTO> = [
// {
// channelId: 4,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '1',
// movePermitted: 0,
// myChannel: '',
// name: '房产',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 5,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '1',
// movePermitted: 0,
// myChannel: '',
// name: '生态',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 6,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '',
// moreChannel: '1',
// movePermitted: 0,
// myChannel: '',
// name: '健康',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// }
]
@State localChannelList: Array<TopNavDTO> = [
// {
// channelId: 7,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '1',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '',
// name: '北京',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 8,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '1',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '',
// name: '上海',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// },
// {
// channelId: 9,
// channelStyle: 1,
// channelType: 1,
// defaultPermitted: 1,
// delPermitted: 1,
// fontCColor: '#000000',
// fontColor: '#000000',
// headlinesOn: 0,
// homeChannel: '',
// iconCUrl: '',
// iconCUrlSize: '',
// iconUrl: '',
// iconUrlSize: '',
// localChannel: '1',
// moreChannel: '',
// movePermitted: 0,
// myChannel: '',
// name: '江苏',
// num: 0,
// pageId: 21212,
// pageType: '',
// underlineCColor: ''
// }
]
// 顶导数据
@State topNavList: TopNavDTO[] = []
dialogController: CustomDialogController | null = new CustomDialogController({
builder: ChannelDialog({
currentTopNavSelectedIndex:this.currentTopNavSelectedIndex,
indexSettingArray: this.indexSettingArray,
topNavList: this.topNavList,
myChannelList: this.myChannelList,
moreChannelList: this.moreChannelList,
localChannelList: this.localChannelList,
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
indexSettingArray: $indexSettingArray,
myChannelList: $myChannelList,
moreChannelList: $moreChannelList,
localChannelList: $localChannelList
}),
cancel: this.exitApp,
alignment: DialogAlignment.TopEnd,
customStyle: true,
})
aboutToAppear() {
this.topNavList.forEach((item,index)=>{
if(item.myChannel === '1'){
this.myChannelList.push(item)
}
if(item.moreChannel === '1'){
this.moreChannelList.push(item)
}
if(item.localChannel === '1'){
this.localChannelList.push(item)
}
})
}
aboutToDisappear() {
this.dialogController = null // 将dialogController置空
}
onCancel() {
console.info('Callback when the first button is clicked')
}
aboutToAppear() {
onAccept() {
console.info('Callback when the second button is clicked')
}
exitApp() {
console.info('Click the callback in the blank area')
aboutToDisappear() {
this.dialogController = null // 将dialogController置空
}
build() {
... ...
... ... @@ -101,6 +101,7 @@ export struct PageComponent {
}
onChange() {
Logger.info(TAG, `onChangezz id: ${this.pageId} , ${this.channelId} , ${this.navIndex} , navIndex: ${this.currentTopNavSelectedIndex}`);
if (this.navIndex === this.currentTopNavSelectedIndex) {
this.getData();
}
... ...
... ... @@ -17,46 +17,63 @@ export struct TopNavigationComponent {
// 顶导数据
@State @Watch('onTopNavigationDataUpdated') topNavList: TopNavDTO[] = []
@State compList: LazyDataSource<CompDTO> = new LazyDataSource();
@State handledTopNavList: TopNavDTO[] = []
//我的频道id缓存列表
@State channelIds: number[] = []
// 我的频道列表
@State myChannelList: TopNavDTO[] = []
// 更多频道列表
@State moreChannelList: TopNavDTO[] = []
// 地方频道列表
@State localChannelList: TopNavDTO[] = []
readonly MAX_LINE: number = 1;
topNavListHandle() {
let defaultMyChannelList: TopNavDTO[] = []
this.handledTopNavList = [...this.topNavList]
this.handledTopNavList.sort((a, b) => {
let handledTopNavList = [...this.topNavList]
handledTopNavList.sort((a, b) => {
return a.num - b.num;
});
Logger.info(TAG, `aboutToAppear this.handledTopNavListsort : ${JSON.stringify(this.handledTopNavList)}`);
for (let i = 0; i < this.handledTopNavList.length; i++) {
if (this.handledTopNavList[i].defaultPermitted === 0 || this.handledTopNavList[i].movePermitted === 0 || this.handledTopNavList[i].delPermitted === 0 || this.handledTopNavList[i].headlinesOn === 1) {
defaultMyChannelList.push(this.handledTopNavList.splice(i, 1)[0]);
handledTopNavList.forEach(item => {
if (item.defaultPermitted === 1 || item.movePermitted === 0 || item.delPermitted === 0 || item.headlinesOn === 1) {
defaultMyChannelList.push(item);
}
}
})
defaultMyChannelList.forEach(item => {
item.myChannel = '1'
if (item.defaultPermitted === 1) {
item.homeChannel = '1'
}
let index = handledTopNavList.findIndex(_item => _item.channelId === item.channelId)
if (index !== -1) {
handledTopNavList.splice(index, 1)
}
})
Logger.info(TAG, `aboutToAppear defaultMyChannelListsort : ${JSON.stringify(defaultMyChannelList)}`);
handledTopNavList.unshift(...defaultMyChannelList)
handledTopNavList.forEach((item, index) => {
if (item.channelType === 2) {
item.localChannel = '1'
}
if (index >= 11) {
if (item.channelType === 1) {
item.moreChannel = '1'
}
} else {
if (item.channelType === 1 && item.myChannel !== '1') {
item.moreChannel = '1'
}
}
for (const element of defaultMyChannelList) {
element.myChannel = '1'
if (element.defaultPermitted === 1) {
element.homeChannel = '1'
if (item.myChannel === '1') {
this.myChannelList.push(item)
}
}
this.handledTopNavList.unshift(...defaultMyChannelList)
for (let i = 0; i < this.handledTopNavList.length; i++) {
if(this.handledTopNavList[i].channelType === 2){
this.handledTopNavList[i].localChannel = '1'
if (item.moreChannel === '1') {
this.moreChannelList.push(item)
}
if(i>=11){
if(this.handledTopNavList[i].channelType === 1){
this.handledTopNavList[i].moreChannel = '1'
}
}else{
if(this.handledTopNavList[i].channelType === 1 && this.handledTopNavList[i].myChannel !== '1'){
this.handledTopNavList[i].moreChannel = '1'
}
if (item.localChannel === '1') {
this.localChannelList.push(item)
}
}
console.info(`handledTopNavList:${JSON.stringify(this.handledTopNavList)}`)
})
}
build() {
... ... @@ -150,7 +167,7 @@ export struct TopNavigationComponent {
Stack({ alignContent: Alignment.TopEnd }) {
Tabs() {
ForEach(this.handledTopNavList, (navItem: TopNavDTO, index: number) => {
ForEach(this.myChannelList, (navItem: TopNavDTO, index: number) => {
TabContent() {
PageComponent({
currentTopNavSelectedIndex: $currentTopNavSelectedIndex,
... ... @@ -171,8 +188,10 @@ export struct TopNavigationComponent {
})
ChannelSubscriptionLayout({
topNavList: this.handledTopNavList,
currentTopNavSelectedIndex: this.currentTopNavSelectedIndex
myChannelList: $myChannelList,
moreChannelList: $moreChannelList,
localChannelList: $localChannelList,
currentTopNavSelectedIndex: $currentTopNavSelectedIndex
})
}
... ... @@ -208,7 +227,6 @@ export struct TopNavigationComponent {
bottom: $r('app.float.top_tab_item_padding_bottom')
})
.id(`col_tabBar${index}`)
}
aboutToAppear() {
... ...
... ... @@ -44,6 +44,7 @@ export struct OperRowListView {
.width(24)
.height(24)
.aspectRatio(1)
.interpolation(ImageInterpolation.High)
}
.margin({
top: 0,
... ... @@ -74,14 +75,12 @@ export struct OperRowListView {
.width('45.5%')
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
Row() {
Flex({ justifyContent: FlexAlign.SpaceAround, alignItems:ItemAlign.Center }) {
ForEach(this.operationList, (item: OperationItem, index: number) => {
this.buildOperationItem(item, index)
}, (item: OperationItem, index: number) => JSON.stringify(item))
}
.width('54.5%')
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
}
.width('100%')
.height(56)
... ... @@ -100,6 +99,7 @@ export struct OperRowListView {
.width(24)
.height(24)
.aspectRatio(1)
.interpolation(ImageInterpolation.High)
}
.margin(5)
.alignItems(HorizontalAlign.Center)
... ... @@ -108,6 +108,5 @@ export struct OperRowListView {
Logger.info(TAG, `buildOperationItem onClick event index: ${index}`);
ToastUtils.showToast('体验版，本功能暂未开发', 1000);
})
.width('19%')
}
}
\ No newline at end of file
... ...
import { Logger, ResourcesUtils } from 'wdKit';
import { HttpUrlUtils, ResponseDTO, WDHttp } from 'wdNetwork';
import { ContentDetailDTO } from 'wdBean';
import { ContentDetailDTO, InteractDataDTO } from 'wdBean';
import HashMap from '@ohos.util.HashMap';
const TAG = 'ContentDetailRequest';
... ... @@ -17,7 +17,16 @@ export interface recommentVideoListParame {
pageSize: number;
refreshCnt: number;
}
interface contentListItem {
contentId: string;
contentType: number;
}
export interface contentListParams {
contentList: contentListItem[];
}
export class ContentDetailRequest {
static getContentDetailDataMock(context: Context): Promise<ResponseDTO<ContentDetailDTO[]>> {
... ... @@ -55,10 +64,10 @@ export class ContentDetailRequest {
*
* @returns
*/
static getContentInteract() {
static getContentInteract(params: contentListParams): Promise<ResponseDTO<InteractDataDTO[]>> {
let url = HttpUrlUtils.getHost() + HttpUrlUtils.INTERACT_DATA_PATH
let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
return WDHttp.get(url, headers)
return WDHttp.post0(url, params, headers)
}
/**
... ...
import router from '@ohos.router';
import mediaquery from '@ohos.mediaquery';
import window from '@ohos.window';
import { Action, ContentDetailDTO, RmhInfoDTO, UserInfoDTO } from 'wdBean';
import { Action, ContentDetailDTO, InteractDataDTO, RmhInfoDTO, UserInfoDTO } from 'wdBean';
import { Logger, SPHelper, WindowModel } from 'wdKit';
import { PlayerConstants, WDPlayerController, WDPlayerRenderView } from 'wdPlayer';
import { devicePLSensorManager } from 'wdDetailPlayApi';
... ... @@ -22,6 +22,7 @@ export struct DetailPlayShortVideoPage {
private relId?: string = undefined
private relType?: string = undefined
private contentDetailData: ContentDetailDTO | undefined = undefined
@Provide interactData: InteractDataDTO | undefined = undefined
@Prop @Watch('currentIndexChange') currentIndex: number = 0
private index: number = 0
private playerController: WDPlayerController = new WDPlayerController();
... ...
import { Action, ContentDetailDTO } from 'wdBean/Index';
import { Action, ContentDetailDTO, InteractDataDTO } from 'wdBean/Index';
import { ContentDetailRequest } from 'wdDetailPlayApi/Index'
import { ResponseDTO } from 'wdNetwork/Index';
import { DetailPlayShortVideoPage } from './DetailPlayShortVideoPage'
import { Test } from './Test'
import router from '@ohos.router';
import window from '@ohos.window';
import { contentListParams } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
@Entry
@Component
... ... @@ -16,6 +18,7 @@ export struct DetailVideoListPage {
@State data: ContentDetailDTO[] = []
@State testData: string[] = ['111', '222', '333']
@State currentIndex: number = 0
@State interactDataList: InteractDataDTO[] = []
async aboutToAppear(): Promise<void> {
console.error('=================',)
... ... @@ -47,11 +50,32 @@ export struct DetailVideoListPage {
if (res.data) {
data = data.concat(res.data)
}
// this.data = res.data || []
console.log('res1===', JSON.stringify(res))
console.log('res==' + this.data)
})
if (data.length > 0) {
const params: contentListParams = {
contentList: []
}
data.map(item => {
params.contentList.push({
contentId: item.newsId + '',
contentType: item.newsType
})
})
// 批量查询内容当前用户点赞、收藏状态
await ContentDetailRequest.getContentInteract(params).then(res => {
if (res.data) {
this.interactDataList = res.data || []
}
console.log('获取互动点赞等数据===', JSON.stringify(res))
})
// 查询各类型内容动态数据接口V2
}
this.data = data
console.error('aboutToAppear===', this.data.length)
... ... @@ -67,7 +91,8 @@ export struct DetailVideoListPage {
DetailPlayShortVideoPage({
contentDetailData: item,
currentIndex: this.currentIndex,
index: index
index: index,
interactData: this.interactDataList[index]
})
}.width('100%')
.height('100%')
... ...
import { RmhInfoDTO, UserInfoDTO } from 'wdBean/Index';
import { InteractDataDTO, RmhInfoDTO, UserInfoDTO } from 'wdBean/Index';
import { ToastUtils } from 'wdKit';
export interface OperationItem {
... ... @@ -13,25 +13,27 @@ const FULL_PARENT: string = '100%';
const TAG = 'OperationListView';
@Preview
@Component
export struct OperationListView {
@Consume rmhInfo?: RmhInfoDTO
@Consume userInfo?: UserInfoDTO
@Consume interactData: InteractDataDTO
@State operationList: OperationItem[] = [
{
icon: $r('app.media.ic_like_uncheck'),
text: "赞",
num: 6622
// num: 6622
},
{
icon: $r('app.media.ic_collect_uncheck'),
text: "收藏",
num: 662,
// num: 662,
},
{
icon: $r('app.media.ic_comment'),
text: "评论",
num: 500,
text: "抢首评",
// num: 500,
},
{
icon: $r('app.media.ic_share'),
... ... @@ -76,11 +78,12 @@ export struct OperationListView {
buildUserComp() {
Column() {
Image(this.rmhInfo?.rmhHeadUrl || this.userInfo?.userHeadUrl)
.width(48)
.width('100%')
.borderRadius(24)
.aspectRatio(1)
// .margin(18)
}
.border({ width: 1, color: Color.White, style: BorderStyle.Solid })
.margin({ bottom: 30 })
}.width(48)
}
/**
... ... @@ -92,20 +95,50 @@ export struct OperationListView {
buildOperationItem(item: OperationItem, index: number) {
Column() {
Image(item.icon)
.width('100%')
.width(32)
.aspectRatio(1)
// .borderRadius(6)
if (item.text === '赞') {
Text(this.interactData.likeNum ? (this.interactData.likeNum + '') : item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
} else if (item.text === '收藏') {
Text(this.interactData.collectNum ? (this.interactData.collectNum + '') : item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
} else if (item.text === '抢首评') {
Text(this.interactData.commentNum ? (this.interactData.commentNum + '') : item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
} else {
Text(item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
Text(item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(FontWeight.Normal)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.margin(5)
.width(32)
.margin({ bottom: 20 })
// .backgroundColor(Color.Black)
.alignItems(HorizontalAlign.Center)
.hoverEffect(HoverEffect.Scale)
... ...