react-native-screens

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、最新のリリースノートを参照してください。

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パッケージを再インストールします。

例

以下の例では、4つの同一の画面を持つデモアプリを作成します。各画面には番号が表示され、ユーザーは4つのうちの任意の画面に移動したり戻ったりできます。

この例では、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={"Screen" + 0} component={DemoScreen} initialParams={{ id: 0 }} options={screenOptions} />
      <Stack.Screen key={1} name={"Screen" + 1} component={DemoScreen} initialParams={{ id: 1 }} options={screenOptions} />
      <Stack.Screen key={2} name={"Screen" + 2} component={DemoScreen} initialParams={{ id: 2 }} options={screenOptions} />
      <Stack.Screen key={3} name={"Screen" + 3} component={DemoScreen} initialParams={{ id: 3 }} options={screenOptions} />
    </Stack.Navigator>
  </NavigationContainer>
)

APIリファレンス

コンポーネント

コンポーネント名	説明
`ScreenContainer`	1つ以上の`Screen`コンポーネントのコンテナです。
`Screen`	ナビゲーション画面に表示するビューのコンテナです。
`ScreenStack`	1つ以上の`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>）はサポートされていません。