# ty-react-native-deprecated-custom-components

**Repository Path**: rn-mi/ty-react-native-deprecated-custom-components

## Basic Information

- **Project Name**: ty-react-native-deprecated-custom-components
- **Description**: TY项目react-native-deprecated-custom-components仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-27
- **Last Updated**: 2025-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 模板版本：v0.2.2

<p align="center">
  <h1 align="center"> <code>react-native-deprecated-custom-components</code> </h1>
</p>
<p align="center">
        <a href="https://github.com/LenuoCompany/react-native-deprecated-custom-components">
        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20windows%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
    </a>
    <a href="https://github.com/LenuoCompany/react-native-deprecated-custom-components/blob/master/LICENSE">
        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
    </a>
</p>





> [!TIP] [Github 地址](https://github.com/LenuoCompany/react-native-deprecated-custom-components/blob/master)

## 安装与使用

进入到工程目录并输入以下命令：

<!-- tabs:start -->

#### **npm**

```bash
npm install @tuya-oh/react-native-deprecated-custom-components
```

#### **yarn**

```bash
yarn add @tuya-oh/react-native-deprecated-custom-components
```

<!-- tabs:end -->

下面的代码展示了这个库的基本使用场景：

> [!WARNING] 使用时 import 的库名不变。

```tsx
import React, { useState, useRef } from 'react';
import { View, Text, Button, StyleSheet, ScrollView, TouchableHighlight } from 'react-native';
import { Navigator } from 'react-native-deprecated-custom-components';

export function NavigatorDemo() {

  const routes = [
    { title: 'First Scene', index: 0 },
    { title: 'Second Scene', index: 1 },
    { title: 'Third Scene', index: 2 },
  ];

  return (
    <ScrollView style={{ height: '100%', marginBottom: 20 }} >
          <Navigator
            style={styles.container}
            initialRoute={routes[0]}
            initialRouteStack={routes}
            renderScene={(route, navigator) =>
              <TouchableHighlight onPress={() => {
                if (route.index === 0) {
                  navigator.push(routes[1]);
                } else if (route.index === 1) {
                  navigator.push(routes[2]);
                } else {
                  navigator.pop()
                }
              }}>
                <View>
                  <Text>当前页面：{route.title}</Text>
                </View>
              </TouchableHighlight>
            }
          />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 100,
    flex: 1,
  },
  scene: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});
```

## 约束与限制

### 兼容性

在以下版本验证通过

1. RNOH：0.72.28; SDK：5.0.2.126 ; IDE：DevEco Studio 5.0.7.210; ROM：5.0.0.123;

## 属性

| Name                | Description                                               | Type       | Required | Platform | HarmonyOS Support |
| ------------------- | --------------------------------------------------------- | ---------- | -------- | -------- | ----------------- |
| `initialRoute`      | 设置初始路由                                              | `Object`   | 是(yes)  | All      | 是(yes)           |
| `renderScene`       | 根据路由渲染对应组件                                      | `Function` | 是(yes)  | All      | 是(yes)           |
| `configureScene`    | 用于配置场景的过渡动画和手势                              | `Function` | 否(no)   | All      | 是(yes)           |
| `navigationBar`     | 用于自定义全局导航栏的样式和交互逻辑                      | `Node`     | 否(no)   | All      | 是(yes)           |
| `initialRouteStack` | 用于初始化导航器的路由堆栈 的关键属性                     | `Array`    | 否(no)   | All      | 是(yes)           |
| `onWillFocus`       | 用于监听页面即将获得焦点（即页面即将被展示）的事件        | `Function` | 否(no)   | All      | 是(yes)           |
| `onDidFocus`        | 用于监听页面已经完成过渡并完全获得焦点的事件              | `Function` | 否(no)   | All      | 是(yes)           |
| `navigator`         | 可选地从父级navigator传入导航器对象，提供(push/pop)等方法 | `Object`   | 否(no)   | All      | 是(yes)           |
| `sceneStyle`        | 应用于每个场景容器的样式                                  | `Style`    | 否(no)   | All      | 是(yes)           |

## 遗留问题

无

## 其他

## 开源协议

本项目基于 [The MIT License (MIT)](https://github.com/LenuoCompany/react-native-deprecated-custom-components/blob/master/LICENSE) ，请自由地享受和参与开源。