🚀

ネイティブアプリ開発日記（7/100）画面遷移の管理

に公開
React Native
tech

前回はこちら
https://zenn.dev/nabeken/articles/e5eda591f6044f

  • 前回作成した家計簿アプリの機能
    • 支出登録機能
      • 年月日をカレンダーから選択できる
      • 金額をテンキーで入力できる
      • カテゴリをリストから選択できる
    • 支出参照機能
      • 年月毎の集計を参照できる
      • 一覧を参照できる
    • 支出編集機能
      • 支出（1件毎）を編集できる
    • 支出削除機能
      • 支出（1件毎）を削除できる
  • 今回作成する機能
    • 画面遷移をタブバーで管理できる
    • 支出登録機能
      • 年月日・金額・カテゴリそれぞれに対して、値を押下すると入力可能になる

実現した画面遷移はこちら。
タブバーでメニューを選択すると画面を遷移できる。

メニュー１は「支出を入力する画面」。
支出を入力するとメニュー２へ遷移する。

メニュー２は「支出を参照する画面」。
画面１で編集を押下すると画面２へ遷移する。
画面２で支出を上書きすると前画面へ戻る。

実装面の学び1. タブバーで画面遷移を管理

  • アプリ起動時に表示するメニューを指定
    • <Tab.Navigator initialRouteName=・・・>
  • タブバーに表示するメニューの一覧を指定
    • <Tab.Screen name=・・・ component={・・・} />
  • タブバーに表示する名前やアイコンを指定
    • <Tab.Screen name=・・・ options={{tabBarIcon:() => (<Ionicons name=・・・>)}}
App.js
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName='入力'>
        <Tab.Screen
          name="入力"
          component={・・・}
          options={{
            tabBarIcon: ({ color, size }) => (
              <Ionicons name="pencil-outline" color={color} size={size} />
            )
          }}
        />
        <Tab.Screen （略）/>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

実装面の学び2. スタック構造（前画面に戻れる）で画面遷移を管理

  • スタック構造で管理する画面の一覧を指定
    • <Stack.Screen name=・・・ component={・・・} />
App.js
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function ReportStack() {
  return (
      <Stack.Navigator>
        <Stack.Screen name='一覧' component={・・・} />
        <Stack.Screen name='編集' component={・・・} />
      </Stack.Navigator>
  );
}

遷移先では、戻るボタンが画面上部に表示される

  • スタック構造を用いて画面遷移を指定
    • navigation.navigate('編集', {expense: target});
SummaryScreen.js
const handleEdit = (id) => {
    const target = expenses.find((e) => e.id === id);
    navigation.navigate('編集', {expense: target});
};
return (
    <View style={styles.container}>
        <FlatList
            data={expenses}
            keyExtractor={(item) => item.id}
            renderItem={({ item }) => {
                return (
                    <View style>
                        <TouchableOpacity onPress={() => handleEdit(item.id)}>
                            <Text>・・・</Text>
                        </TouchableOpacity>
                    </View>
                );
            }}
        />
    </View>
)

Discussion