【2回】Expo・ReactNativeのView・Text・TextInput・Buttonの使い方

このブログについて

• Expoを使いつつ､ReactNative のアプリ開発についてまとめていきます｡
• 必要に応じて､ライブラリなどの紹介します
• チャプターごとの状態を GitHub で管理するので､必要であればクローンしてください｡

こんな方にオススメ

• React､TypeScript などについては学んでいる
• スマホアプリケーションの開発に興味がある

前提ツールのバージョン

過去の投稿

【1回】Expo・ReactNativeの環境構築

このブログについてExpoを使いつつ､ReactNative のアプリ開発についてまとめていきます｡必要に応じて､ライブラリなどの紹介しますチャプターごとの状態を GitHub で管理するので､必要であればクローンしてください｡こんな方にオ...

www.libetech.info

2025.10.11

基本タグ

ReactNativeのタグを使ってUIを作成していきます｡
以下に基本的なタグについて､他の開発環境との差分を示します｡

View

View · React Native

The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some tou...

reactnative.dev

divタグのようないわゆるcontainerを作るときなどに使用する｡
ReactNativeのViewだけではスクロールなどができないため､専用のコンポーネント（ScrollViewやFlatListなど）が別で用意されている｡

Viewの中に直接テキストを書くことはできない｡
テキストを書く場合は必ず[[#Text]]コンポーネントを用いる必要がある

Text

Text · React Native

A React component for displaying text.

reactnative.dev

テキスト・文字列を表示するためのコンポーネント｡
このコンポーネント以外で直接テキストを表示しようとするとエラーになる｡

TextInput

TextInput · React Native

A foundational component for inputting text into the app via a keyboard. Props provide configurability for several featu...

reactnative.dev

inpuタグに相当するコンポーネント｡
主にテキスト関係（メールアドレスやパスワードなど）の入力のみで､ラジオボタンやチェックボックスなどは別コンポーネントになっている｡

TextInputで私がよく使うpropsを下記に示します。

サンプルコード

app/_layout.tsx

import { Stack } from "expo-router";
import "react-native-reanimated";

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen
        name="(Home)"
        options={{ title: "ホーム", headerShown: false }}
      />
    </Stack>
  );
}

app/(Home)/_layout_.tsx

import { Stack } from "expo-router";
import "react-native-reanimated";

export default function HomeLayout() {
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{ title: "ホーム", headerShown: false }}
      />
    </Stack>
  );
}

app/(Home)/index.tsx

import React from "react";
import { Button, StyleSheet, Text, TextInput, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function Home() {
  const [email, setEmail] = React.useState("");

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.titleContainer}>
        <View style={styles.circle} />
        <Text style={styles.title}>Home</Text>
      </View>
      <Text>このアプリは､Expo・ReactNativeのサンプルになります｡</Text>
      <TextInput
        keyboardType="email-address"
        placeholder="メールアドレス..."
        placeholderTextColor="gray"
        value={email}
        onChangeText={(text) => setEmail(text)}
        style={styles.email}
        autoCapitalize="none"
      />
      <Button title="送信" onPress={() => console.log(email)} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    gap: 8,
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "flex-start",
    backgroundColor: "#f0f0f0",
  },
  titleContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: 8,
  },
  circle: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: "blue",
  },
  title: {
    fontSize: 20,
  },
  email: {
    width: "80%",
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginTop: 20,
    padding: 10,
    marginLeft: 10,
    borderRadius: 5,
    backgroundColor: "#ffffff",
  },
});

※ SafeAreaView ･･･ ステータスバーのところを考慮して表示してくれるViewコンポーネント

まとめ

• Expoの基本的なタグとその使い方について解説しました。
• よく使う基本タグ
  • View
  • Text
  • TextInput

参考資料

https://docs.expo.dev

Build one JavaScript/TypeScript project that runs natively on all your users' devices.

docs.expo.dev

React Native · Learn once, write anywhere

A framework for building native apps for Android, iOS, and more using React

reactnative.dev