react-native-screens

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

react-native-screensライブラリは、ネイティブのナビゲーションコンテナコンポーネントをReact Nativeに公開します。このライブラリはスタンドアロンライブラリではなく、フル機能のナビゲーションライブラリに依存しています。

インストール
例
APIリファレンス
- コンポーネント
既知の問題と制限事項
- react-native-screensを無効にする
サポートされているバージョン
関連トピック

インストール

package.jsonファイルに依存関係を追加します。
クリップボードにコピーしました。
```
 "dependencies": {
     ...
     "@amazon-devices/react-native-screens": "~2.0.0"
 }
```
npm installコマンドを使用して、npmパッケージを再インストールします。

例

クリップボードにコピーしました。

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 (only fade animation is supported)
stackPresentation
statusBarAnimation
statusBarColor
statusBarHidden
statusBarStyle
statusBarTranslucent
swipeDirection
transitionDuration

<ScreenStackHeaderConfig>およびその他のヘッダーコンポーネント（<ScreenStackHeaderCenterView>、ScreenStackHeaderRightView、<ScreenStackHeaderLeftView>、<ScreenStackHeaderSearchBarView>）はサポートされていません。