rn-7-1. ViewとTextの基本

ViewとTextコンポーネントの基本を学びます

React Native - 第1章: React Native基礎 - コンポーネントとスタイリング

課題:ViewとTextの基本を学ぼう

React Nativeでは、ViewTextが最も基本的なコンポーネントです。 Viewはコンテナ(箱)、Textはテキスト表示に使います。

やること

  1. 1.Viewでコンテナを作る
  2. 2.Textで「Hello, React Native!」を表示
  3. 3.追加で2つのTextを表示する

ViewとTextの使い方

React Nativeのコンポーネントをインポートします:

import { View, Text } from 'react-native';

Viewはコンテナ、Textはテキスト表示に使います:

<View>
  <Text>こんにちは</Text>
  <Text>React Native</Text>
</View>

ポイント:React Nativeでは<div>の代わりに<View>、 テキストは必ず<Text>で囲みます。

期待される出力

Hello, React Native!
これは私の最初のアプリです
React Nativeは楽しい!
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      {/* ここに3つのTextを追加してください */}
      {/* 1. Hello, React Native! */}
      {/* 2. これは私の最初のアプリです */}
      {/* 3. React Nativeは楽しい! */}
      
    </View>
  );
}