HarmonyOS上RN实现tabview类似的demo

参考如下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.