screensフォルダを作成する

Vueでのviewsフォルダのようにscreensフォルダを作成

プロジェクト直下のsrcの中にscreensフォルダを作成する。
このフォルダにはvuejsでのviewsフォルダのような役割のフォルダ。

App.jsxをさらにシンプルにする。

現在App.jsxは下記の通り。

import React from 'react';
import { StyleSheet, View } from 'react-native';

import AppBar from './src/components/AppBar';
import CircleButton from './src/components/CircleButton';
import MemoList from './src/components/MemoList';

// eslint-disable-next-line react/function-component-definition
export default function App() {
  return (
    <View style={styles.container}>
      <AppBar />
      <MemoList />
      <CircleButton>+</CircleButton>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FCE4EC',
  },
});

これをよりスッキリさせる。

screensフォルダの中にMemoListScreen.jsxファイルを作成する。

App.jsxに記述されていた内容を移植してくる。
MemoListScreen.jsx

import React from 'react';
import { View, StyleSheet } from 'react-native';

import AppBar from '../components/AppBar';
import CircleButton from '../components/CircleButton';
import MemoList from '../components/MemoList';

// eslint-disable-next-line react/function-component-definition
export default function MemoListScreen() {
  return (
    <View style={styles.container}>
      <AppBar />
      <MemoList />
      <CircleButton>+</CircleButton>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FCE4EC',
  },
});

App.jsxにMemoListScreen.jsxを読み込む

App.jsx

import React from 'react';

import MemoListScreen from './src/screens/MemoListScreen';

// eslint-disable-next-line react/function-component-definition
export default function App() {
  return (
    <MemoListScreen />
  );
}

App.jsxがよりスッキリさせることができた。