模板版本：v0.2.2

[!TIP] Github 地址

安装与使用

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

npm

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

yarn

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

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

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

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) ，请自由地享受和参与开源。