「React Native入門: モバイルプログラミング」の感想・備忘録

点数
感想
Androidシミュレータのインストール
iOSシミュレータのインストール
画面サイズ変更時のイベントハンドラ
レスポンシブデザインを実現するためのライブラリ
1. react-native-responsive-screen
2. react-native-size-matters
react-native-picker/picker

点数

50点

感想

2023年10月の書籍だが、react-native-cliを使っている、クラスコンポーネントを使っている、など内容は古いものであった。
また、同じような解説やサンプルコードが何度も出てくる、ビルドやリリースの解説はReact Naiveとは関係ない内容になっている、など期待はずれな書籍であった。

Androidシミュレータのインストール

1. Android Studioをインストール

Android Studio とアプリツールをダウンロードする - Android デベロッパー | Android Developers

Android Studio は、Android アプリ向けに最適化された統合開発環境（IDE）をアプリ作成者に提供します。Android Studio を今すぐダウンロード

2. シミュレータの起動

Android Studioを起動 > More Actions > Virtual Device Manager > Create Device

3. シミュレータでReact Nativeアプリを実行

React Nativeのプロジェクトホームでnpm startの後にaキー押下

エミュレータ上で以下のエラーとなる場合は、

Unable to load script. Make sure you’re either running a Metor service (run ‘react-native start’) or that your bundle ‘index.android.bundle’ is packaged correctly for release.

mkdir android/app/src/main/assets; npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
を実行する必要がある。

iOSシミュレータのインストール

1. AppStoreからXcodeをインストール

2. エシミュレータの起動

メニューバーのXcode > Open Developer Tool > Simulator

3. シミュレータでReact Nativeアプリを実行

React Nativeのプロジェクトホームでnpm startの後にiキー押下

「error Failed to build iOS project. “xcodebuild” exited with error code ’65’. To debug build logs further, consider building your app with Xcode.app, by opening ‘MyApp.xcodeproj’.」となる場合は、cd ios; pod installを実行する必要がある。

エミュレータ上で「no bundle url present」となる場合は、Xcode上で空の./ios/main.jsbundleを作成してからreact-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'を実行する必要がある。

画面サイズ変更時のイベントハンドラ

useEffect(() => {
  const subscription = Dimensions.addEventListener("change", ()=> {
    console.log(Dimensions.get('window').width)
  })
  return () => subscription.remove()
}, []);

※ 横向きか縦向きかの判定はwidthとheightを比較すればよい。

レスポンシブデザインを実現するためのライブラリ

react-native-responsive-screen
画面の幅に対する割合でサイズを指定する。
react-native-size-matters
指定したサイズを端末サイズによって変換してくれる。

react-native-responsive-screen

npm install react-native-responsive-screen

import {heightPercentageToDP as hp, widthPercentageToDP as wp} from 'react-native-responsive-screen';
〜省略〜
<View style={{
  width: wp("50%"),
  height: hp("30%"),
  alignItems: "center",
  justifyContent: "center"
}}>
  <Text>あいうえお</Text>
</View>

react-native-size-matters

npm install react-native-size-matters

import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
〜省略〜
<View style={{
  width: scale(30),
  height: verticalScale(50),
  padding: moderateScale(5)
}}/>;

react-native-picker/picker

コンボボックスを実装するためのコンポーネント。
以前はReact Natice標準コンポーネントだったが、0.63からは@react-native-picker/pickerパッケージに移行された。

npm install @react-native-picker/picker

<Picker selectedValue={selectedLanguage} 
  onValueChange={(itemValue, itemIndex) =>
    setSelectedLanguage(itemValue)
  }
  style={{ height: 200, width: 200, }}
>
  <Picker.Item label="Java" value="1"/>
  <Picker.Item label="JavaScript" value="2"/>
</Picker>

※ width, heightを指定しないと表示されないので注意