react-native-masked-view

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

@amazon-devices/react-native-masked-view__masked-viewは、マスクされたビューをレンダリングするReactコンポーネントを提供します。

インストール
例
APIリファレンス
- コンポーネント
  - MaskedViewのプロパティ
実装の詳細
サポートされているバージョン
関連リソース

インストール

package.jsonファイルに依存関係を追加します。

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

   "dependencies": {
      ...
      "@amazon-devices/react-native-masked-view__masked-view": "~2.0.0"
   }

npm installコマンドを使用して、package-lock.jsonファイルを再インストールします。

例

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

import React from 'react';
import { Text, View } from 'react-native';
import MaskedView from '@amazon-devices/react-native-masked-view__masked-view';

const App = () => {
  return (
    <MaskedView
      style={{ flex: 1, flexDirection: 'row', height: '100%' }}
      maskElement={
        <View
          style={{
            // マスクはアルファチャネルに基づくため、背景を透明にします。
            backgroundColor: 'transparent',
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text
            style={{
              fontSize: 60,
              color: 'black',
              fontWeight: 'bold',
            }}
          >
            基本的なマスク
          </Text>
        </View>
      }
    >
      {/* マスクの背後に表示するものを指定します。ここには画像など、何でも指定できます。 */}
      <View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
      <View style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }} />
    </MaskedView>
  );
}

export default App

APIリファレンス

Vegaの@amazon-devices/react-native-masked-view__masked-viewライブラリは、以下に示すコンポーネントのサポートを追加します。

コンポーネント

コンポーネント	説明
`MaskedView`	マスクされたビューをレンダリングするコンポーネント。

MaskedViewのプロパティ

プロパティ	説明
`maskElement`	マスク要素。

実装の詳細

VegaのMaskedViewライブラリでは、MaskedViewコンポーネントと、公式ドキュメント（英語のみ）に記載されているプロパティのうち、Android固有のandroidRenderingModeプロパティを除くすべてがサポートされます。

サポートされているバージョン

パッケージ名	Amazon NPMライブラリのバージョン	Vega OSのビルド番号	Vega SDKバージョン	リリースノート
`@amazon-devices/react-native-masked-view__masked-view`	2.0.1+0.3.1	`OS 1.1 (201010438050)`	0.20