React Native 화면 전환법

일단, 이 글에서는 제가 자주 쓰는 화면 전환법들만 다뤘음을 밝히며, 더 자세한 사항을 알아보고 싶으신 분들은 아래 공식 문서나 다른 문서들을 참고하시는 것이 더 좋을 것입니다.

https://reactnavigation.org/docs/getting-started

모든 과정을 시작하기 앞서, 아래 패키지들을 설치해줍니다.

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

만약 tab view와 stack view도 사용한다면 아래 패키지들도 추가로 설치해줍니다.

npm install @react-navigation/bottom-tabs @react-navigation/stack

아래는 기본적인 화면을 구성하는 코드입니다.(function 형식보단 class 형식이 더 많습니다)

App.js

import 'react-native-gesture-handler';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Icon from 'react-native-vector-icons/MaterialIcons';

import Login from './assets/screens/Login';

const Stack = createStackNavigator();

const Tab = createBottomTabNavigator();

function Main({ navigation }) {

return (

<Tab.Navigator

screenOptions={({ route }) => ({

tabBarIcon: ({ focused, color, size }) => {

let iconName;

if (route.name === 'Me') {

iconName = 'account-circle';

} else if (route.name === 'Feed') {

iconName = 'people';

} else if (route.name === 'Search') {

iconName = 'search';

}

// You can return any component that you like here!

return <Icon

name={iconName}

size={size}

/>;

},

})}

>

<Tab.Screen

name="Me"

component={Me}

      />

<Tab.Screen

name="Feed"

component={Home}

      />

<Tab.Screen

name="Search"

component={Search}

      />

</Tab.Navigator>

);

}

export default class App extends Component {

constructor(props) {

super(props);

}

render() {

return (

<NavigationContainer>

<Stack.Navigator initialRouteName={'Login'}>

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

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

</Stack.Navigator>

</NavigationContainer>

    );

}

};

react native에서 자주 쓰는 화면 전환 메서드는 push(한 화면 위에 다른 화면 겹치기), pop(현재 화면 삭제), replace(현재 화면을 다른 화면으로 대체)입니다. 일정한 조건을 만족할 때 메서드를 사용하여 화면을 전환할 수 있습니다. 또한 한 화면에서 다른 화면으로 parameter(인자)를 전달해 줄 수도 있고, 이 인자는 변수와 함수 모두 가능합니다. 예를 들면 아래와 같습니다.

1) push

this.props.navigation.push('Following', {

itemId: this.state.itemId,

onPop: () => this.refresh(),

}

2) pop

this.props.navigation.pop();

3) replace

this.props.navigation.replace("Login")

인자를 전달받은 component는

this.props.route.params.itemId;

this.this.props.route.params.onPop()

와 같이 사용할 수 있습니다.

P.S. 여러 화면들이 push로 겹쳐있는 경우 맨 첫 화면으로 가서 첫 화면을 새로고침하고 싶을 때가 있습니다. 그 땐 아래와 같이 코드를 작성할 수 있습니다.

this.props.navigation.reset({

index: 0,

routes: [{name: 'Main'}]

});