react-native-masked-view
@amazon-devices/react-native-masked-view__masked-viewは、マスクされたビューをレンダリングするReactコンポーネントを提供します。
インストール
- 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 |
関連リソース
その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。
Last updated: 2025年9月30日

