React Native - Navigation(1). stack navigation#2

Screen 간 data전달 방법

Screen 이동은 navigation으로 한다는 내용은 저번 post에 언급했다. 만약 첫 번째 화면에서 두 번째 화면으로 data를
전달하려면 어떻게 해야 할까?

정답은 navigation을 이용하여 data를 전달하는 것이다. 

저번 코드를 수정하여 data를 넘기는 예제를 해볼 예정이다.

첫 번째 화면에서 click을 하면 click 한 수를 보여준 뒤, 두 번째 화면에서 클릭한 수만큼의 아이콘을 출력해 보는 예제이다.

우선, 첫번째 화면의 코드이다.

const First = ({navigation}) => {
  const [count, setCount] = useState(0);
  return (
    <View
      style={{
        flexDirection: 'column',
        flex:1,
        justifyContent: 'center',
        alignItems:'center',
      }}>
       <TouchableOpacity
        style={{
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: 50,
          height: 50,
        }}
        onPress={() => setCount(count + 1)}>
        <Text style={{fontSize: 20}}>{count}</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={{
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: 350,
          height: 50,
        }}
        onPress={() => navigation.navigate('Second', {click: count})}>
        <Text>Go to SecondPage!!</Text>
      </TouchableOpacity>
    </View>
  );
};

함수형 Component에서는 원래 state를 사용하지 못했지만, Hooks를 이용하여 state를 사용할 수 있게 되었다.
이 부분은 다음에 다룰 예정이다. 

저번 post와 다른 점은 click 된 수를 표시하는 <Text> 태그를 추가하였고 그 수를 navigation을 이용하여 전달한다.

onPress={() => navigation.navigate('Second', {click: count})}>

이 부분에 navigate() 함수에 전달되는 parameter 중 첫 번째 매개변수는 이동할 화면이고, 두 번째 매개변수는 전달할 parameter들이다. click이라는 이름으로 count(클릭된 수)를 전달하는 코드이다.

 

두 번째 화면 코드이다.

const Second = ({route, navigation}) => {
  const {click} = route.params;
  const text = (count) => {
    var temp = '';
    while (count > 0) {
      temp = temp.concat('🍕');
      count--;
    }
    return temp;
  };

  return (
    <View
      style={{
        flexDirection: 'column',
        flex:1,
        justifyContent: 'center',
        alignItems:'center',
      }}>
      <Text style={{padding: 10, fontSize: 42}}>{text(click)}</Text>
      <TouchableOpacity
        style={{
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: 250,
          height: 50,
        }}
        onPress={() => navigation.goBack()}>
        <Text>Go Back!!</Text>
      </TouchableOpacity>
    </View>
  );
};

navigation만을 parameter로 갖는 첫 화면과는 달리, route라는 parameter를 갖는다. 
이 route를 이용하여 params를 받아올 수 있다. 첫 번째 화면에서 설정한 이름과 동일하게 params의 이름을 설정해야만 올바른 값이 전달된다.

text()라는 함수는 전달받는 값만큼의 🍕아이콘을 갖는 문자열을 만들어 주는 함수이다. 

즉, click한 수를 전달 받아 그 수만큼 🍕아이콘을 만들어 출력해주는 화면이다. 
아래에는 첫 화면으로 돌아가는 <Text>가 있다. ( 이전 post와 동일 )

전체 코드이다.

import * as React from 'react';
import {useState} from 'react';
import {TouchableOpacity, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const First = ({navigation}) => {
  const [count, setCount] = useState(0);
  return (
    <View
      style={{
        flexDirection: 'column',
        flex:1,
        justifyContent: 'center',
        alignItems:'center',
      }}>
       <TouchableOpacity
        style={{
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: 50,
          height: 50,
        }}
        onPress={() => setCount(count + 1)}>
        <Text style={{fontSize: 20}}>{count}</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={{
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: 350,
          height: 50,
        }}
        onPress={() => navigation.navigate('Second', {click: count})}>
        <Text>Go to SecondPage!!</Text>
      </TouchableOpacity>
    </View>
  );
};

const Second = ({route, navigation}) => {
  const {click} = route.params;
  const text = (count) => {
    var temp = '';
    while (count > 0) {
      temp = temp.concat('🍕');
      count--;
    }
    return temp;
  };

  return (
    <View
      style={{
        flexDirection: 'column',
        flex:1,
        justifyContent: 'center',
        alignItems:'center',
      }}>
      <Text style={{padding: 10, fontSize: 42}}>{text(click)}</Text>
      <TouchableOpacity
        style={{
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: 250,
          height: 50,
        }}
        onPress={() => navigation.goBack()}>
        <Text>Go Back!!</Text>
      </TouchableOpacity>
    </View>
  );
};

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="First">
        <Stack.Screen
          name="First"
          component={First}
          options={{title: 'First Screen'}}
        />
        <Stack.Screen name="Second" component={Second} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

 

다음은 출력화면 이다.