React Navigation 5 Tutorials [ #3 ]

React Navigation 5 Tutorials
📌 チュートリアルによるプロジェクトです!
ファイルの分離
開始前
DetailsとHomeファイルの分割

screensフォルダ

を作成

HomeScreen.jsファイル

の作成

DetailsScreen.jsファイル

の作成
HomeScreen.js

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


const HomeScreen = ({navigation}) => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            <Button
                title="Go to Details screen" 
                onPress={() => navigation.navigate("Details")} />
        </View>
    );
};

export default HomeScreen;

DetailsScreen.js

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

    const DetailsScreen = ({navigation}) => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Details Screen</Text>
            <Button
                title="Go to Details screen Again" 
                onPress={() => navigation.navigate("Details")}/>

            <Button
                title="Go to Home screen" 
                onPress={() => navigation.navigate("Home")}/>

            <Button
                title="Go back" 
                onPress={() => navigation.goBack()}/>

            <Button
                title="Go to the first screen" 
                onPress={() => navigation.popToTop()}/>
        </View>
    );
};

export default DetailsScreen;

app.jsにインポート

import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';