HarmonyOS上RN实现tabview类似的demo

HarmonyOS
2024-12-25 08:35:34
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Heiang

参考如下demo:

index中增加两个属性:

shape?: 'text' | 'normal' | 'capsule';
tabBarTheme?: 'white' | 'red' | 'black';
shape = 'normal',
tabBarTheme,
shape={shape} // tabbarItem样式
tabBarTheme={tabBarTheme}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

TabBarView中增加属性:

shape?: 'text' | 'normal' | 'capsule';
tabBarTheme?: 'white' | 'red' | 'black';
shape,
tabBarTheme,
shape === 'capsule' ? styles.shapeStyle : {}
shapeStyle: {
  backgroundColor: '#12121212',
  borderRadius: 30
},
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

使用:

import TabView from '@music/rn-js-tab'
import DemoPage from './DemoPage';
// demopage为一个默认页面,按需实现一个demo就行
const tabViewRef = useRef(null);
// tabbarItem默认样式
| shape | tabBarItem样式 | 'text' | 'normal' | 'capsule' | 'normal' |
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

index.tsx

ImageSourcePropType,
PageScrollStateChangedNativeEvent,
subTabTitles?: string[][];
rightImageSource?: ImageSourcePropType;
onTabBarRightIconClicked?: () => void; // 点击右侧按钮 

rightImageSource,
onChange,
onTabBarRightIconClicked,

const onPageScrollStateChangedTabView = useCallback(
  (e: PageScrollStateChangedNativeEvent) => {
    onPageScrollStateChanged(e)
    console.log(time() + ' onPageScrollStateChangedTabView ', e.nativeEvent.pageScrollState);
    if (e.nativeEvent.pageScrollState === 'idle') {
      scrollToActiveKey(String(activePageRef.current));
    }
  },
  []
);
tabBarTheme={'red'}
align={align}
rightImageSource = {rightImageSource}

onChange={function (index) {
  pagerRef.current?.setPage(index);
  if(onChange) {
    onChange(index);
  }
}}
onTabBarRightIconClicked = {function () {
  if(onTabBarRightIconClicked) {
    onTabBarRightIconClicked();
  }

  offscreenPageLimit={1}
  onPageSelected={onPageSelectedTabView}
  onPageScrollStateChanged={onPageScrollStateChangedTabView}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.

TabBarItem.tsx

<Text style={[styles.subCountTextStyle, labelStyle]}>{subCount}</Text>

TabBarView.tsx
Image,
ImageSourcePropType,
TouchableOpacity,

rightImageSource?: ImageSourcePropType;
onChange?: (index: number) => void; // tab切换回调
onTabBarRightIconClicked?: () => void; // 点击右侧按钮 

rightImageSource = require('xxxxx'),
onChange,
onTabBarRightIconClicked,

const labStyleValue = useCallback(() => {
  if (tabBarTheme === 'red') {
    return { color: 'red' };
  } else if (tabBarTheme === 'white') {
    return { color: 'white' };
  } else {
    return {}
  }
}, [tabBarTheme]);

return (
  <View style = {{flexDirection:'row'}}>
shape === 'capsule' ? styles.shapeStyle : {},
]}
labelStyle={labStyleValue()}

  <TouchableOpacity
onPress={()=> {
  if(onTabBarRightIconClicked) {
    onTabBarRightIconClicked();
  }
}}
>
<Image
style = {{width:50,height:50}}
source={rightImageSource}
/>
  </TouchableOpacity>
  </View>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
分享
微博
QQ
微信
回复
2024-12-25 11:53:39
相关问题
FileObserver在NEXT中类似的实现
2130浏览 • 1回复 待解决
HarmonyOS 有没有Toast类似的组件
719浏览 • 1回复 待解决
HarmonyOS webview有bounces类似的属性么
564浏览 • 1回复 待解决
rn HarmonyOS可运行demo
461浏览 • 1回复 待解决
HarmonyOS RN字体设置demo
350浏览 • 1回复 待解决
HarmonyOS类似骨架屏的实现demo
529浏览 • 1回复 待解决
HarmonyOS 是否支持类似的.9图的配置?
952浏览 • 1回复 待解决
HarmonyOS RN调试工具flipper连接不
658浏览 • 1回复 待解决