ボタンをタップして画面を移動する（続き）

s-yoshiii · Jun 21, 2022 · ba7f78a · ba7f78a
1 parent 89fa9b7
commit ba7f78a
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 10 deletions.
diff --git a/App.jsx b/App.jsx
@@ -16,7 +16,7 @@ export default function App() {
   return (
     <NavigationContainer>
       <Stack.Navigator
-        initialRouteName="MemoDetail"
+        initialRouteName="Login"
         screenOptions={{
           headerStyle: { backgroundColor: '#876445' },
           headerTitleStyle: { color: '#fff' },

diff --git a/src/screens/LoginScreen.jsx b/src/screens/LoginScreen.jsx
@@ -7,17 +7,22 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
-
 import Button from '../components/Button';
 
-function LoginScreen() {
+function LoginScreen(props) {
+  const { navigation } = props;
   return (
     <View style={styles.container}>
       <View style={styles.inner}>
         <Text style={styles.title}>Log in</Text>
         <TextInput style={styles.input} value="Email Adress" />
         <TextInput style={styles.input} value="Password" />
-        <Button label="Submit" />
+        <Button
+          label="Submit"
+          onPress={() => {
+            navigation.navigate('MemoList');
+          }}
+        />
         <View style={styles.footer}>
           <Text style={styles.footerText}>Not registered?</Text>
           <TouchableOpacity>

diff --git a/src/screens/MemoCreateScreen.jsx b/src/screens/MemoCreateScreen.jsx
@@ -4,7 +4,8 @@ import { View, StyleSheet, TextInput, Keyboard } from 'react-native';
 import CircleButton from '../components/CircleButton';
 import KeyboardSafeView from '../components/KeyboardSafeView';
 
-function MemoCreateScreen() {
+function MemoCreateScreen(props) {
+  const { navigation } = props;
   return (
     <KeyboardSafeView style={styles.container}>
       <View style={styles.inputContainer}>
@@ -15,7 +16,13 @@ function MemoCreateScreen() {
           onSubmitEditing={Keyboard.dismiss}
         />
       </View>
-      <CircleButton name="check" color="#fff" />
+      <CircleButton
+        name="check"
+        color="#fff"
+        onPress={() => {
+          navigation.goBack();
+        }}
+      />
     </KeyboardSafeView>
   );
 }

diff --git a/src/screens/MemoListScreen.jsx b/src/screens/MemoListScreen.jsx
@@ -3,11 +3,18 @@ import { View, StyleSheet } from 'react-native';
 import CircleButton from '../components/CircleButton';
 import MemoList from '../components/MemoList';
 
-function MemoListScreen() {
+function MemoListScreen(props) {
+  const { navigation } = props;
   return (
     <View style={styles.container}>
       <MemoList />
-      <CircleButton name="plus" color="#fff" />
+      <CircleButton
+        name="plus"
+        color="#fff"
+        onPress={() => {
+          navigation.navigate('MemoCreate');
+        }}
+      />
     </View>
   );
 }

diff --git a/src/screens/SingUpScreen.jsx b/src/screens/SingUpScreen.jsx
@@ -10,7 +10,8 @@ import {
 
 import Button from '../components/Button';
 
-function SingUpScreen() {
+function SingUpScreen(props) {
+  const { navigation } = props;
   return (
     <View style={styles.container}>
       <View style={styles.inner}>
@@ -20,7 +21,7 @@ function SingUpScreen() {
         <Button
           label="Submit"
           onPress={() => {
-            Alert.alert('Submit');
+            navigation.navigate('MemoList');
           }}
         />
         <View style={styles.footer}>