---
title: "JSS React Nativeサンプルアプリの中のUIコンポーネント"
slug: "ui-components-in-the-jss-react-native-sample-app"
abstract: "UIコンポーネントの簡単な概要とSitecoreフィールドの扱い方"
---
# JSS React Nativeサンプルアプリの中のUIコンポーネント

React NativeのSitecore JavaScriptレンダリングSDK(JSS)で構築されたアプリケーション内のUIコンポーネントは、他のReact Nativeコンポーネントと何ら変わりませんが、fieldsプロパティを持つそのPlaceholderコンポーネント内に動的に追加されます。

import React from 'react';
import { View } from 'react-native';
import { Text } from '@sitecore-jss/sitecore-jss-react-native';

const Welcome = ({ fields }) => (
 <View>
 <Text field={fields.title} />
 </View>
);

export default Welcome;

Welcomeコンポーネントは内部コンポーネントの状態やライフサイクルメソッドの必要性がないため、状態なし関数コンポーネントとして書かれていますが、ES6クラス構文を使い、React.Componentから拡張することも可能です。JSS通常のReact Native慣例の使用に制限はありません。

## Sitecoreフィールドタイプの取り扱い

React Native用のJSSは、Sitecoreフィールドタイプを扱うためのヘルパーコンポーネントを提供します。ヘルパーコンポーネントは、Sitecoreフィールド値をレンダリングし、高度なSitecoreエディタでのフィールド編集を可能にする特別なコンポーネントです。

React Native用のJSSには、テキスト、画像、日付、リッチテキストなどのフィールドタイプを表示するコンポーネントが含まれています。

> !ヒント利用可能なすべてのコンポーネントのライブ例については、JSS React Nativeサンプルアプリケーションのスタイルガイドページを参照してください。