3. React Native expo 페이지 이동(react-navigation)

 

아니 버튼 사이즈를 크게 해주고 싶은데 <Button> 태그에 스타일 넣어줘도 안되고 뭐를 써도 안됨... 왜 안 되는 거지... 

그래서 버튼 태그를 뷰 태그로 감싸주고 스타일 넣어줘서 해결

 

 

이제 페이지 이동

흠... 블로그 찾아보니까 추가로 설치해 줘야 하는 게 많네...?

다들 뭔 기능들인거지...?

npm install @react-navigation/native
npm install @react-navigation/stack

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

블로그마다 조금씩 달라서 조금씩 열심히 따라 해 봤다

 

 

우선 App.js

import React from "react";
import "react-native-gesture-handler";

import Login from './src/Login';
import Main from './src/Main';

import {NavigationContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack";

const Stack = createStackNavigator();

function App() {
    return (
        <NavigationContainer>

            <Stack.Navigator>
                <Stack.Screen name="Login" component={Login}/>
                <Stack.Screen name="Main" component={Main}/>

            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;

 

Login.js

import React from "react";

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

function Login({navigation}) {
	const [id, onChangeId] = React.useState('ID');
    const [pw, onChangePw] = React.useState('Password');

    return (

        <View style={styles.container}>
            <Image
                source={{uri: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzEyMzBfMTA1%2FMDAxNzAzOTM0MDE4MTY5.EnQ_Al65sMhrNYFcEunuOIcZD7d_xpXnDhFYsl5k5aog.eHUbc0WA3A0QM0oVp3qLNpNXdDvXYR5I9WKOzDGjrnQg.JPEG.pooh_sk1012%2F%25B9%25D9%25C5%25C1%25C8%25AD%25B8%25E9_%25C0%25CC%25B7%25B9%25B5%25F0%25C0%25DA%25C0%25CE_%25B4%25DE%25B7%25C2_2560x1600.jpg&type=a340"}}
                style={{width: 600, height: 300, borderRadius: 30}}
            />
            <Text style={styles.title}> Calendar </Text>
            <TextInput
                placeholder={ID}
                style={styles.input}
                color={'#e2d2c1'}
                onChangeText={onChangeId}
            />
            <TextInput
                style={styles.input}
                onChangeText={onChangePw}
                placeholder={password}
                keyboardType="numeric" //숫자만 입력
                secureTextEntry={true} //* 표시
            />
            <View style={styles.button}>
                <Button
                    color={'#e2d2c1'}
                    textStyle={{textAlign: 'center', font: 40}}
                    title={`Login`}
                    onPress={() =>
                        navigation.navigate('Main',{
                        	id: id,
                            pw: pw
                        })
                    }
                />
            </View>


        </View>

    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    title: {
        fontSize: 30,
    },
    input: {
        height: 40,
        margin: 12,
        borderWidth: 1,
        padding: 10,
    },
    button: {
        width: 170,
        height: 40,
        margin: 12,
        padding: 10,
    }
});

export default Login;

 

 

음....... 화면 상단에.... name이 나타났다.... 

 

Main.js

import React, {useEffect} from "react";
import {View, Text, Image, StyleSheet, Button} from "react-native";

export default function Main({navigation, route}) {
    useEffect(() => {
        navigation.setOptions({
            title: "메인 페이지",
            headerStyle: {
                backgroundColor: '#1F266A',
                shadowColor: '#1F266A',
            },
            headerTintColor: "#fff",
        })
    }, []);

    return (
        <View style={styles.container}>
            <Text>Start!</Text>
            <Image
                source={{uri: "https://search.pstatic.net/sunny/?src=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F98528335%3Fv%3D4%3Fs%3D400&type=a340"}}
                style={{width: 300, height: 300}}
            />
            
            //넘어온 파라미터
            //<Text> id : {route.params.id}</Text>
            //<Text> pw : {route.params.pw}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

메인 페이지에도... 심지어 뒤로 가기 버튼이 작동한다... 

나는 아무것도 설정해 준 게 없는데... 

음.... 없애는 것도 되려나....

 

 

App.js 에서 <Stack.Navigator> 태그 안에 screenOptions 넣어주면 설정 가능

            <Stack.Navigator
                screenOptions={{
                    headerStyle: {
                        backgroundColor: "white",
                        borderBottomColor: "white",
                        shadowColor: "white",
                        height: 100
                    },
                    //헤더의 텍스트를 왼쪾에 둘지 가운데에 둘지를 결정
                    headerTitleAlign: 'left',
                    headerTintColor: "#000",
                    headerBackTitleVisible: false
                }}
            >
                <Stack.Screen name="Login" component={Login}/>
                <Stack.Screen name="Main" component={Main}/>

            </Stack.Navigator>

 

 

전체 설정이 아닌 하나의 페이지에서만 다르게 설정해주고 싶다면

Main.js

import ...

export default function Main({navigation, route}) {
    useEffect(() => {
        navigation.setOptions({
            title: "메인 페이지",
            headerStyle: {
                backgroundColor: '#1F266A',
                shadowColor: '#1F266A',
            },
            headerTintColor: "#fff",
        })
    }, []);

    return (
        <View style={styles.container}>
            <Text>Start!</Text>
        </View>
    );
}

const styles ...

 

 

https://reactnavigation.org/docs/native-stack-navigator/

 

 

 

router 도 있는지 있다면 뭐가 더 나은 지 찾아봐야겠다

흠... 원래 앱에서는 navigation 쓰나?

 

 

 

---

params 전달 방법