概要
ReactNativeでウェブサイトを再現してみます。
ExpoというReactNative開発を簡単にするツールを使って作成していきます。
完成イメージ
プロジェクト作成
Expoのインストール
Expoをインストールすることで、React Nativeのプロジェクトをより簡単に作成することができるようになります。
npm install --global expo-cli
プロジェクトの作成
プロジェクトを作成します。今回はrn-websiteとしました。
expo init rn-website
テンプレートを選択します。
必須の構造のみのblankを選択します。
blankはJavaScriptとTypeScriptの2種類がありますが、今回はJavaScriptを選択してエンターを押します。
? Choose a template: › - Use arrow-keys. Return to submit.
----- Managed workflow -----
❯ blank a minimal app as clean as an empty canvas
blank (TypeScript) same as blank but with TypeScript configuration
tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
----- Bare workflow -----
minimal bare and minimal, just the essentials to get you started
プロジェクトが作成されたら、プロジェクト名でフォルダができているので、フォルダの中に移動して、起動させてみます。
cd rn-website
npx expo start
アプリを見るためのさまざまなオプションがあります。
事前にExpo Goのアプリを検証端末（iosやandroid）にインストールしておくと、QRコードをスキャンすることで、アプリを検証端末に読み込むことができます。
また、aでAndroid、iでiOSのエミュレータを起動して確認することができます。
それぞれエミュレータデバイスの設定をしておく必要があります。
また、webで確認する場合でwebが非アクティブになっている場合はreact-native-web, react-domを事前にインストールする必要があります。（npm i react-native-web react-dom）
iOSエミュレータの場合はApp StoreからXcodeをインストールしている必要があります。Xcodeが起動できたら、トップのメニューから「Xcode」 > 「Open Developer Tool」 > 「Simulator」でシミュレーターを起動しておきます。
Androidの場合、Android Studioをインストールしている必要があります。
Android Studioをインストールしたら、Virtual Device Managerからデバイスの種類を選択して作成し、起動をしておきます。
以下は、iを選択してiOSで確認したものです。
ビルドが終わると、右の様にreact nativeのデフォルトテンプレートが表示されます。
→
Top画面作成
VSCodeでフォルダを開いて編集していきます。
srcフォルダを作成しその中にscreensフォルダを作成します。
screensフォルダの中にTop.jsを作成します。
Top.js
mkdir src
mkdir src/screens
touch src/screens/Top.js
画面
まず、基本的な構造を記述します。
import React from "react";
const Top = () => {
return ()
}
export default Top;
中を記述していきます。記述はReactとよく似ていますが、HTMLを使えないので、それに相当する要素をreact-nativeからインポートする必要があります。
この画面では、divに相当するものがViewコンポーネントで、pタグに相当するのがTextコンポーネントです。
import React from "react";
+ import { View, Text, ScrollView } from "react-native";
const Top = () => {
return (
+ <ScrollView>
+ <View>
+ <Text>bluecode, Lifestyle developer.</Text>
+ </View>
+ <View>
+ <Text>websiteの最新情報</Text>
+ <Text>最新の情報をご案内します。</Text>
+ </View>
+ </ScrollView>
)
}
export default Top;
<ScrollView>
<View>
<Text>bluecode, Lifestyle developer.</Text>
</View>
<View>
<Text>websiteの最新情報</Text>
<Text>最新の情報をご案内します。</Text>
</View>
</ScrollView>
App.js
一旦確認したいのでApp.jsでTopをインポートして不要な部分を削除します。
import React from "react";
import Top from "./src/screens/Top";
export default function App() {
return (
<Top />
);
}
保存すると、同時に起動中のエミュレータに反映されます。
一旦表示ができていることは確認できました。
スタイルをつけていきますが、「bluecode, Lifestyle developer.」の部分には背景に画像を挿入したいです。HTMLではcssで背景にイメージ画像を指定しましたが、ReactNativeではImageBackgroundタグを使って画像を挿入します。
import React from "react";
- import { View, Text ,ScrollView } from "react-native";
+ import { View, Text, ScrollView, ImageBackground, } from "react-native";
const Top = () => {
return (
<ScrollView>
+ <ImageBackground source={{ uri: "https://picsum.photos/1000/300" }} >
- <View>
<Text>bluecode, Lifestyle developer.</Text>
+ </ImageBackground>
- </View>
<View>
<Text>websiteの最新情報</Text>
<Text>最新の情報をご案内します。</Text>
</View>
</ScrollView>
)
}
export default Top;
スタイル
スタイルはStylesheetコンポーネントを使って記述します。
それぞれのタグにstyles={styles.xxx}という形で設定し、Top.jsの下部でStyleSheet.createでそれぞれのスタイル指定してstylesを作ります。
ReactNativeではいままでのようにpxの指定はしません。React Nativeでは、Androidの"dp"、iOSの"ポイント"にそれぞれ置き換えられるためです。％を使用するときは""で囲んで記述できます。
import React from "react";
- import { View, Text, ScrollView, ImageBackground } from "react-native";
+ import { View, Text, ScrollView, ImageBackground, StyleSheet } from "react-native";
const Top = () => {
return (
<ScrollView>
- <ImageBackground source={{ uri: "https://picsum.photos/1000/300" }} >
- <Text>bluecode, Lifestyle developer.</Text>
+ <ImageBackground style={styles.Top} source={{ uri: "https://picsum.photos/1000/300" }} >
+ <Text style={styles.titleText} >bluecode, Lifestyle developer.</Text>
</ImageBackground>
- <View>
+ <View style={styles.Content}>
<Text>websiteの最新情報</Text>
<Text>最新の情報をご案内します。</Text>
</View>
</ScrollView>
)
}
export default Top;
+ const styles = StyleSheet.create({
+ Top: {
+ flex: 1,
+ alignItems: "center",
+ justifyContent: "center",
+ fontSize: 20,
+ paddingTop: 100,
+ paddingBottom: 60,
+ },
+ titleText: {
+ color: "#ffffff",
+ fontWeight: "bold",
+ paddingBottom: 10,
+ },
+ Content: {
+ alignItems: "center",
+ paddingTop: 30,
+ }
+ })
import React from "react";
import { View, Text, ScrollView, ImageBackground, StyleSheet } from "react-native";
const Top = () => {
return (
<ScrollView>
<ImageBackground style={styles.Top} source={{ uri: "https://picsum.photos/1000/300" }} >
<Text style={styles.titleText} >bluecode, Lifestyle developer.</Text>
</ImageBackground>
<View style={styles.Content}>
<Text>websiteの最新情報</Text>
<Text>最新の情報をご案内します。</Text>
</View>
</ScrollView>
)
}
export default Top;
const styles = StyleSheet.create({
Top: {
flex: 1,
alignItems: "center",
justifyContent: "center",
fontSize: 20,
paddingTop: 100,
paddingBottom: 60,
},
titleText: {
color: "#ffffff",
fontWeight: "bold",
paddingBottom: 10,
},
Content: {
alignItems: "center",
paddingTop: 30,
}
})
保存して確認してみます。
iphone 14 Pro Maxの場合この様になっています。
最終的なコード
Top.js
import React from "react";
import { View, Text, ScrollView, ImageBackground, StyleSheet } from "react-native";
const Top = () => {
return (
<ScrollView>
<ImageBackground style={styles.Top} source={{ uri: "https://picsum.photos/1000/300" }} >
<Text style={styles.titleText} >bluecode, Lifestyle developer.</Text>
</ImageBackground>
<View style={styles.Content}>
<Text>websiteの最新情報</Text>
<Text>最新の情報をご案内します。</Text>
</View>
</ScrollView>
)
}
export default Top;
const styles = StyleSheet.create({
Top: {
flex: 1,
alignItems: "center",
justifyContent: "center",
fontSize: 20,
paddingTop: 100,
paddingBottom: 60,
},
titleText: {
color: "#ffffff",
fontWeight: "bold",
paddingBottom: 10,
},
Content: {
alignItems: "center",
paddingTop: 30,
}
})
App.js
import React from "react";
import Top from "./src/screens/Top";
export default function App() {
return (
<Top />
);
}