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

模板版本：v0.2.2

react-native-deprecated-custom-components

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@tuya-oh/react-native-deprecated-custom-components Releases，并下载适用版本的 tgz 包。

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

[TIP]# 处替换为 tgz 包的路径

npm

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

yarn

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

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

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