07. React Nativeの基礎（モバイルアプリのUIとロジック）

React Nativeを使ってモバイルアプリをつくることに挑戦しています。第七回目となる本投稿からは、UIとロジックを作り込んでいく過程をまとめていきたいと思います。

1. オンライン学習プラットフォーム「Udemy」

現在、Udemyの講座「React Native – The Practical Guide [2023]」を受講しながら、React Nativeを使ったモバイルアプリの開発を進めています。（→プログラミング言語コースはこちら）英語の講座ですが、JavaScriptとReactの基礎知識があれば、Android（Java）やiOS（Swift、Objective-C）のモバイルアプリの開発経験がなくても取り組める内容となっています。

過去の記事は下記をご覧ください。
第一回：01. React Nativeでモバイルアプリをつくる
第二回：02. React Nativeでモバイルアプリをつくる
第三回：03. 失敗から学ぶ「React Nativeモバイルアプリ」の開発準備
第四回：04. React Nativeの基礎（コンポーネントとスタイル定義）
第五回：05. React Nativeの基礎（ボタンとテキストインプット）
第六回：06. React Nativeの基礎（LinearGradientコンポーネント）

2. 背景画像（ImageBackground）とグラデーション

第六回では、LinearGradientコンポーネントを使って、グラデーション背景を作成しました。配色は、Gradient by ShapeFactoryというサイトに掲載されているCSSを参考にして、下記のようにデザインし直しています。

background-image: linear-gradient(25deg, #3a6b85, #7794a5, #b1bec5, #ebebe7)

参考にしたグラデーションのCSSは上記の通りです。また、テキストインプットとボタン配置部分の背景色は「backgroundColor: ‘#0f1b4b’」、ボタンの色は「backgroundColor: ‘#2049ad’」と設定しています。

今回は、ImageBackgroundコンポーネント（→公式ドキュメントはこちら）を使って、モバイルアプリに背景画像を設定したデザインにしたいと思います。完成時の「App.js」ファイルのソースコードは下記の通りです。（画像は「Unsplash」のものを使用）

import { StyleSheet, ImageBackground } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient'
import StartGameScreen from './screens/StartGameScreen';

export default function App() {
  return (
    <LinearGradient colors={['#3a6b85', '#7794a5', '#b1bec5', '#ebebe7']} style={styles.rootScreen}>
      <ImageBackground 
        source={require('./assets/images/background.png')} 
        resizeMode="cover"
        style={styles.rootScreen}
        imageStyle={styles.backgroundImage}
      >
        <StartGameScreen />
      </ImageBackground>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  rootScreen: {
    flex: 1
  },
  backgroundImage: {
    opacity: 0.15
  }
});

ImageBackgroundコンポーネントのPropsは、「source」でフォルダとファイル名を、「resizeMode」でフレームが画像の寸法と一致しない場合に、画像のサイズを変更する方法を指定しています。「resizeMode=”cover”」は、画像を均一にスケーリング（画像の縦横比を維持）することを意味します。

また、「imageStyle」で画像のスタイルを設定しています。「opacity: 0.15」にしていますが、opacityプロパティは要素の透明度を指定する際に使用します。透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で表現されます。（→参考サイト：HTMLクイックリファレンス）

背景画像の透明度の設定の有無によって、画面の表示に上記のような違いが生じます。今回は②の透明度を設定したデザインを採用しました。

3. 入力テキストを判定してアラートを表示する

次に、テキスト（数値）を画面入力して「Confirm（確認）」および「Reset（リセット）」ボタンを押下した際のロジックを作成していきます。ソースコードは下記の通りです。

今回決めた仕様は3つあります。

confirmInputHandler関数内で、1と2を記述しています。if文で条件判定を行い、Alertコンポーネント（→公式ドキュメントはこちら）を使用して、タイトル、メッセージ、アラート内のボタン構成を指定しました。

function confirmInputHandler() {
    const chosenNumber = parseInt(enteredNumber);

    if (isNaN(chosenNumber) || chosenNumber <= 0 || chosenNumber > 99) {
        Alert.alert(
            'Invalid number!', 
            'Number has to be a number between 1 and 99.',
            [{ text: 'Okay', style: 'destructive', onPress: resetInputHandler }]
        );
        return;
    }

    console.log('Valid number!');
}

また、「style: ‘destructive’」は、削除などの注意を促す際のボタンであること、そして「onPress: resetInputHandler」は、Okayボタン押下時のコールバック関数が「resetInputHandler（リセットボタン押下時処理）」であることを意味します。

アラートの画面表示は上記のようになります。

第七回では、ImageBackgroundコンポーネントとAlertコンポーネントの使い方を学ぶことができました。次回以降もモバイルアプリのUIとロジックの制作を進めていきたいと思います。

---

【アイキャッチ画像】UnsplashのJackson Sophatが撮影した写真