react-native-screens

开放Beta测试文档 作为预发布开放Beta测试的一项内容，亚马逊提供了此技术文档。随着亚马逊收到反馈并对功能进行迭代，所描述的这些功能可能会发生变化。有关最新功能的信息，请参阅最新的发布说明。

react-native-screens旨在向React Native公开原生导航容器组件。它不是为了用作独立库而设计，而是作为功能齐全的导航库的依赖项而设计。

安装

在package.json文件中添加JavaScript库依赖项。选择适用于您的React Native版本的选项卡。
- React Native 0.72
- React Native 0.83
已复制到剪贴板。
"dependencies": { ... "@amazon-devices/react-native-screens": "~2.0.0" }
已复制到剪贴板。
"dependencies": { ... "@amazon-devices/react-native-screens": "~3.0.0" }
使用npm install命令重新安装npm程序包。

示例

此示例创建了包含四个相同屏幕的演示应用。每个屏幕均显示其编号，可导航至任意屏幕或返回上一级。

该示例使用react-navigation构建屏幕。要运行此演示，您需要在package.json中安装以下导航依赖项：

"dependencies": {
    ...
    "@amazon-devices/react-navigation__native": "^8.0.0",
    "@amazon-devices/react-navigation__stack": "^8.0.0"

}

已复制到剪贴板。

import { enableFreeze, enableScreens } from '@amazon-devices/react-native-screens';
import { NavigationContainer } from '@amazon-devices/react-navigation__native';
import { createStackNavigator } from '@amazon-devices/react-navigation__stack';
import * as React from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

enableScreens();
enableFreeze();

const Stack = createStackNavigator();

//@ts-ignore
const DemoScreen = ({ navigation, route }) => {
  const { id } = route.params;
  return (
    <View>
      <Text>屏幕 {id}</Text>
      {[0,1,2,3].map((buttonId) => (
        <TouchableOpacity onPress={() => navigation.navigate('Screen' + buttonId)}>
          <Text>转到屏幕#{buttonId}</Text>
        </TouchableOpacity>
      ))}
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text>{"<- 返回"}</Text>
      </TouchableOpacity>
    </View>
  )
}

const screenOptions = { animationEnabled: true }
export const App = () => (
  <NavigationContainer>
    <Stack.Navigator screenOptions={screenOptions} detachInactiveScreens>
      <Stack.Screen key={0} name={"屏幕" + 0} component={DemoScreen} initialParams={{ id: 0 }} options={screenOptions} />
      <Stack.Screen key={1} name={"屏幕" + 1} component={DemoScreen} initialParams={{ id: 1 }} options={screenOptions} />
      <Stack.Screen key={2} name={"屏幕" + 2} component={DemoScreen} initialParams={{ id: 2 }} options={screenOptions} />
      <Stack.Screen key={3} name={"屏幕" + 3} component={DemoScreen} initialParams={{ id: 3 }} options={screenOptions} />
    </Stack.Navigator>
  </NavigationContainer>
)

API参考

组件

组件名称	描述
`ScreenContainer`	一个或多个`Screen`组件的容器。
`Screen`	用于在导航屏幕上显示视图的容器。
`ScreenStack`	需要一个或多个`Screen`组件作为直接子组件，并在platform-native堆栈容器中渲染Screen组件。

适用于Vega的React Native使用react-native-screens来增加对原生屏幕的支持，并支持与react-native-screens API相同的API。

不支持特定于iOS、Android和Windows的属性。

实现详情

不支持以下<Screen>组件属性（大多数是特定于iOS/Android的）：

customAnimationOnSwipe
fullScreenSwipeEnabled
gestureEnabled
gestureResponseDistance
hideKeyboardOnSwipe
homeIndicatorHidden
nativeBackButtonDismissalEnabled
navigationBarColor
navigationBarHidden
onHeaderBackButtonClicked
onNativeDismissCancelled
preventNativeDismiss
replaceAnimation
screenOrientation
sheetAllowedDetents
sheetExpandsWhenScrolledToEdge
sheetCornerRadius
sheetGrabberVisible
sheetLargestUndimmedDetent
stackAnimation（仅支持fade和none动画）
stackPresentation
statusBarAnimation
statusBarColor
statusBarHidden
statusBarStyle
statusBarTranslucent
swipeDirection
transitionDuration
不支持<ScreenStackHeaderConfig>和其他标头组件（<ScreenStackHeaderCenterView>、ScreenStackHeaderRightView、<ScreenStackHeaderLeftView>和<ScreenStackHeaderSearchBarView>）

禁用react-native-screens

如果您想禁用原生屏幕支持并使用普通的React Native视图，请在入口文件 (App.js) 中添加以下代码：

复制到剪贴板。

import { enableScreens } from '@amazon-devices/react-native-screens';

enableScreens(false);

支持的版本

NPM程序包版本	Vega SDK版本	Vega OS版本	React Native版本
~2.0.x+3.25.0	0.23及更早版本	`操作系统1.1 (1401010009820)`及更早版本	0.72
~3.0.x+4.4.0	0.24	`操作系统1.2 (2101020054720)`	0.72、0.83

其他资源

有关其他库的信息，请参阅支持的第三方库和服务。

Last updated: 2026年7月21日