ReactNative 네비게이션

참고)

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

---

ReactNative + Typescript 

 

1. App.tsx에 네비게이션을 생성한다. (app.tsx, index.js 등에서 네비게이션을 생성한다.)

name : 네비게이션을 할 때 넘겨줄 스크린 이름을 지정

component: 스크린

options : 옵션

headerShown : 페이지마다 헤더를 보여준다. default : true

title : 헤더에 쓰일 제목을 바꾼다. default : name

import React from 'react';
import {
  DisasterGuideScreen
} from './src/screens/index.js';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer} from '@react-navigation/native';

const App = () => {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="DisasterGuides"
          options={{headerShown: false}}
          component={DisasterGuideScreen}
        />
        <Stack.Screen
          name=""
          options={}
          component={}
        />
        ...
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

 

2. 연결할 스크린을 만든다. 

기본 적인 틀)

import React from 'react';
import {View, Text} from 'react-native';

const DisasterGuide: React.FC = () => {

  return (
    <View style={{margin:20}}>
        <Text>기본틀</Text>
    </View>
  );
};

export default DisasterGuide;

navigate할 때 파라미터를 넘겨주는 경우)

route를 props로 지정하고 route.params로 넘겨받은 데이터를 새로 만든 변수에 저장하여 사용한다

import React from 'react';
import {Text, View} from 'react-native';

interface Props {
    route: any;
}

const DisasterGuide: React.FC<Props> = ({route}) => {
    const {guideInformation} = route.params;
  
  return (
    <View style={{margin:20}}>
        <Text>{guideInformation[0]}</Text>
    </View>
  );
};

export default DisasterGuide;

3. 네비게이션 버튼 만들기

기본 적인 틀)

navigation.navigate('DisasterGuides');

navigate할 때 파라미터를 넘겨주는 경우)

import React from 'react';
import {View, TouchableOpacity} from 'react-native';

interface GuideFooterProps {
  navigation: any;
}
const GuideFooter: React.FC<GuideFooterProps> = ({navigation}) => {

  const value = ['a','b','c']

  return (
    <View>
      <TouchableOpacity
          onPress={() => {
            navigation.navigate('DisasterGuides', {
                guideInformation: value,
              });
          }}>
      </TouchableOpacity>
    </View>
  );
};

export default GuideFooter;