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';