`react-nativescript-navigation`

React NativeScript Navigation 是 React NativeScript 的官方导航库。

为了实现原生堆栈视图，我们重新实现了与 React Native 的 react-native-screens 实现相同的 API，但针对 NativeScript（因此将其重命名为 react-nativescript-screens 以减少困惑）。

为了实现原生标签页，我只是遵循了 React Navigation 文档；不需要 Screens 库。

这是一个临时实现；除核心功能之外（如堆栈的推送和弹出屏幕），其他方面可能尚未完全工作。

安装

npm install --save react-nativescript-navigation @react-navigation/native

您不需要安装 React Navigation 的 "入门" 部分中提到的任何 react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view。这些只为 React Native 项目而设计。react-nativescript-navigation 包含它所需的全部依赖。

文档

React Navigation: https://reactnavigation.reactjs.ac.cn/docs/getting-started
React NativeScript: https://react-nativescript.netlify.com/
React NativeScript 中的导航: https://react.nativescript.cn/docs/core-concepts/navigation

有关完整配置选项列表，请参阅类型定义

示例用法

import * as React from "react";
import { BaseNavigationContainer } from '@react-navigation/core';
import { stackNavigatorFactory, tabNavigatorFactory } from "react-nativescript-navigation";

const TabNavigator = tabNavigatorFactory();
const StackNavigator = stackNavigatorFactory();

/* Tabs Navigator. */
const TabsAppContainer = () => (
    <BaseNavigationContainer>
        <TabNavigator.Navigator initialRouteName="first">
            <TabNavigator.Screen name="first" component={First}/>
            <TabNavigator.Screen name="second" component={Second}/>
        </TabNavigator.Navigator>
    </BaseNavigationContainer>
);

/* Stack Navigator. */
const StackAppContainer = () => (
    <BaseNavigationContainer>
        <StackNavigator.Navigator
            initialRouteName="first"
            screenOptions={{
                headerShown: true,
            }}
        >
            <StackNavigator.Screen name="first" component={First}/>
            <StackNavigator.Screen name="second" component={Second}/>
        </StackNavigator.Navigator>
    </BaseNavigationContainer>
);

function First({ navigation }){
    function onButtonTap(){
        navigation.navigate('second');
    }

    return (
        <flexboxLayout
            style={{
                flexGrow: 1,
                width: "100%",
                height: "100%",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: "yellow",
            }}
        >
            <label fontSize={24} text={"You're viewing the first route!"}/>
            <button onTap={onButtonTap} fontSize={24} text={"Go to next route"}/>
        </flexboxLayout>
    );
}

function Second({ navigation }){
    function onButtonTap(){
        navigation.goBack();
    }

    return (
        <flexboxLayout
            style={{
                flexGrow: 1,
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: "gold",
            }}
        >
            <label fontSize={24} text={"You're viewing the second route!"}/>
            <button onTap={onButtonTap} fontSize={24} text={"Go back"}/>
        </flexboxLayout>
    );
}

// export default TabsAppContainer;
export default StackAppContainer;

限制

React NativeScript Navigation 的 TabNavigator 和 StackNavigator 的可配置选项比 React Navigation 的少——这是因为 React NativeScript Navigation 的导航器是完全原生的，因此最终受限于原生可用的样式选项（以及 NativeScript Core 如何封装它们）。

这个库也是一个正在进行中的项目，我根本没时间一个人实现所有功能。如果您需要更多的可配置性，请考虑提交 Pull Request。

要查看完整的配置选项列表，请参阅类型定义

免责声明：该库较新，所以我很可能在类型定义中错误地实现了其中的一些配置选项。对于常规路径，我建议从简单开始，如果导航器似乎无法支持，请灵活设计。