# ReactNativeScrollableTabView

**Repository Path**: scenario-samples/react-native-scrollable-tab-view

## Basic Information

- **Project Name**: ReactNativeScrollableTabView
- **Description**: 在复杂的移动应用开发中，使用react-native-scrollable-tab-view实现多标签页时，如果缺乏有效的状态管理机制，容易出现数据不同步、状态混乱的问题，导致用户看到的信息不一致，影响用户体验和数据准确性。 为解决这一问题，本示例采用ref结合goToPage()方法实现跨标签页的状态共享与同步。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-06
- **Last Updated**: 2026-02-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# rn中使用scrollable-tab-view实现数据状态共享和同步

## 场景介绍

在复杂的移动应用开发中，使用react-native-scrollable-tab-view实现多标签页时，如果缺乏有效的状态管理机制，容易出现数据不同步、状态混乱的问题，导致用户看到的信息不一致，影响用户体验和数据准确性。
为解决这一问题，本示例采用ref结合goToPage()方法实现跨标签页的状态共享与同步。

## 效果预览

<img src="screenshots/testScreen.gif" width="200">

## 实现思路

1. 创建当前页面的状态管理机制。
  
```
const [currentPage, setCurrentPage] = useState(0);
```

2.创建一个持久化的引用对象，用于存储对ScrollableTabView实例的引用。

```
const tabViewRef = useRef(null);
```

3.将ScrollableTabView组件实例赋值给tabViewRef.current。

```
<ScrollableTabView
   ref={tabViewRef}
   initialPage={0}           // 初始显示第0页
>
```

4.建立双向绑定，确保React的声明式状态管理与ScrollableTabView的命令式操作保持完全一致。

```
// 监听tab变化并更新状态
<ScrollableTabView
   onChangeTab={({ i }) => {
      setCurrentPage(i);
   }}
>
```
```
// 添加useEffect
useEffect(() => {
   if (tabViewRef.current) {
      tabViewRef.current.goToPage(currentPage);
   }
}, [currentPage]);
```


## 约束与限制

- 本示例支持API Version 20 Release及以上版本。
- 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
- 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。
- 本示例使用0.72.59版本RNOH。
- 本示例使用1.0.0-0.2.1版本@react-native-oh-tpl/react-native-scrollable-tab-view。

## 工程目录

```
ReactNativeKeyboardListener                      // RN工程
├──harmony                                       // harmony工程
│  ├──entry/src/main/cpp                         // native相关配置
│  │  ├──generated                               // codegen自动生成的桥接代码
│  │  │   └──RNOHGeneratedPackage.h              
│  │  ├──CMakeLists.txt
│  │  └──PackageProvider.cpp
│  ├──entry/src
│  │        ├──main/ets
│  │        │       ├──entryability
│  │        │       │  └──EntryAbility.ets
│  │        │       ├──pages
│  │        │       │  └──Index.ets              // harmony侧入口
│  │        │       └──RNPackagesFactory.ets
│  │        └──module.json5                      
│  └──entry/src/main/resources/rawfile           // bundle、静态资源存放目录
├──App.tsx                                       // 数据状态共享和同步逻辑实现
├──index.js                                      // 入口文件
├──metro.config.js                               // 打包配置
```
## 参考文档
[useRef](https://zh-hans.legacy.reactjs.org/docs/hooks-reference.html#useref)

[react-native-scrollable-tab-view](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-scrollable-tab-view.md#react-native-scrollable-tab-view)

[RNOH使用文档](https://gitcode.com/openharmony-sig/ohos_react_native/blob/tag_0.77.33/README.md)