[어플개발] 7. 페이지 이동

준비한 설문을 다 수행하고 나면 하단에 적정 금액 확인 버튼을 눌러 결과를 보여주고 싶었다.

그러려면 기존에 App.js에 때려박은 소스를 수정할 필요가 있었다.

먼저 공식문서를 찾아보니 navigation이라는게 있는 것 같았다(https://reactnative.dev/docs/navigation)

Navigating Between Screens · React Native

일단 시키는데로 library를 설치하고

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

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

공식문서에 나와있는 샘플처럼 기존에 소스를 변경했다.

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Screen
          name="Home"
          component={Poll}
        />
        <Stack.Screen
          name="Result"
          component={Result}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

기존에 App.js에 구현되어 있던 애들은 screens/Poll.js 파일로 전부 이동시켰고, 결과페이지인 screens/Result.js도 임시로 만들어 위와 같이 구성했다.

App을 구동시키면 제일 상단에 Stack.Screen이 화면에 표시된다.

그리고 Poll.js에서 버튼을 눌렀을 때 Result.js의 화면이 나오도록 하기 위해

const Poll = ({navigation}) => {
	const onPress = () => {
    	navigation.navigate('Result');
    };
    return (
    	<View style={styles.footer}>
          <TouchableOpacity style={styles.btn} onPress={onPress}>
            <Text style={styles.text}>적정 금액 확인</Text>
          </TouchableOpacity>
        </View>
    )
}

이렇게 버튼을 눌렀을 때 onPress 함수에서 Result로 naviage 해주도록 해줬다.

실제로 확인하기 위해 npm run android를 명령을 실행했더니

이렇게 나오면서 metro가 실행되었다가 죽는 현상이 발생했다. 구글링해보니 https://github.com/bjpublic/Reactnative/issues/2

[Page 62 - 안드로이드, 윈도우] Unable to load script. Make sure you're either running a Metro server · Issue #2 · bjpu

이런 글을 찾았고 저기 적혀있는데로 nodejs를 새로 설치하니 해결되었다.

다시 한 번 npm run android 실행!

첫 페이지

결과페이지

적정금액확인 버튼을 누르면 임시로 만든 결과 페이지로 이동하는 것을 확인했다.

그런데 페이지 상단에 Home, Result 같은 영역이 생겼는데 이걸 안보이게 하고 싶었다.

검색해보니 <Stack.Screen> 태그 options 파라미터에 headerShown : false 값을 주면 사라진다고 한다.

(https://aboutreact.com/react-native-hide-navigation-bar-and-make-screen-full-screen/)

<Stack.Screen name="Home" component={Poll} options={{headerShown: false}} />

header가 사라졌다.

header가 사라졌다!