Chapter 07無料公開

画面作成

はる@フルスタックエンジニア
はる@フルスタックエンジニア
2022.10.05に更新
このチャプターの目次
  1. Home.js
  2. FriendsScreen.js
  3. AddScreen.js
  4. MessageScreen.js
  5. ProfileScreen.js
  6. 動作確認

Home.js

画面をそれぞれ作成していきます。

screens フォルダを作成して、HomeScreen.js ファイルを作成します。

rnfeと入力すると、自動でテンプレートのコードが書かれますので、利用してみてください。

src/screens/HomeScreen.js

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

const HomeScreen = () => {
  return (
    <View>
      <Text>HomeScreen</Text>
    </View>
  )
}

export default HomeScreen

FriendsScreen.js

screens フォルダに FriendsScreen.js ファイルを作成します。

src/screens/FriendsScreen.js

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

const FriendsScreen = () => {
  return (
    <View>
      <Text>FriendsScreen</Text>
    </View>
  )
}

export default FriendsScreen

AddScreen.js

screens フォルダに AddScreen.js ファイルを作成します。

src/screens/AddScreen.js

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

const AddScreen = () => {
  return (
    <View>
      <Text>AddScreen</Text>
    </View>
  )
}

export default AddScreen

MessageScreen.js

screens フォルダに MessageScreen.js ファイルを作成します。

src/screens/MessageScreen.js

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

const MessageScreen = () => {
  return (
    <View>
      <Text>MessageScreen</Text>
    </View>
  )
}

export default MessageScreen

ProfileScreen.js

screens フォルダに ProfileScreen.js ファイルを作成します。

src/screens/ProfileScreen.js

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

const ProfileScreen = () => {
  return (
    <View>
      <Text>ProfileScreen</Text>
    </View>
  )
}

export default ProfileScreen

動作確認

すべての画面が作成できたので、動作確認してみましょう。

yarn android
yarn ios

ボトムナビゲーションにアイコンが表示され、すべての画面に遷移できます。