ReactNativeNavigation

最低限の使い方

code:hello world.js

// In App.js in a new project

import * as React from 'react';

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

import { NavigationContainer } from '@react-navigation/native';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {

return (

<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

<Text>Home Screen</Text>

</View>

);

}

const Stack = createNativeStackNavigator();

function App() {

return (

<NavigationContainer>

<Stack.Navigator>

<Stack.Screen name="Home" component={HomeScreen} />

</Stack.Navigator>

</NavigationContainer>

);

}

export default App;

prop.navigation.navigate() の挙動

遷移先が同一Stackか、異なるStackかで引数が変わる

遷移メソッドに型チェックを設ける

まず、Param Listを作成する。

Param Listには、Stackに積む全画面分の型定義を行う（遷移先文字列の型チェックに使う、と考えれば想像しやすい）

（画面列挙で）Navigatorを作成する際に、ParamListを使う

（画面定義で）Screenを作成する際に宣言するPropを、ParamListを使って作る

このため、ParamListはルートもScreenも両方で参照できる、かなり参照上位のオブジェクトにする必要がある

同一の画面を複数のStackで使いたい時にどうしたら良いかわからない

前の画面に値を返す

Propsにコールバック関数を渡すように設計する

画面の遷移元を調べる