React Navigation 5 Tutorials [ #3 ]
React Navigation 5 Tutorials
📌 チュートリアルによるプロジェクトです!
ファイルの分離
開始前
DetailsとHomeファイルの分割 screensフォルダ を作成 HomeScreen.jsファイル の作成 DetailsScreen.jsファイル の作成
HomeScreen.js
📌 チュートリアルによるプロジェクトです!
ファイルの分離
開始前
DetailsとHomeファイルの分割
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.jsimport 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';
Reference
この問題について(React Navigation 5 Tutorials [ #3 ]), 我々は、より多くの情報をここで見つけました https://velog.io/@zopall0000/React-Navigation-5-Tutorials-3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol