[React-native CLI] RN에서 react-naviation으로 다른 스크린으로 이동하는 방법

사용 방법

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

const App = () => {
  const navigation = useNavigation();

  const onNavigationPress = () => {
    navigation.navigate('Record');
  };
  
  return <Button title={Record페이지 이동} onPress={onNavigationPress} />
}

 

대신 Stack.Screen에 지정된 name이름을 넣어야 됩니다.

 

 

전체 코드

navigation/StackNavigator.tsx

// react, react-native
import {createNativeStackNavigator} from '@react-navigation/native-stack';

// components
import BottomTabsNavigator from './BottomTabsNavigator';
import Record from '../screens/Record';

const StackNavigator = () => {
  const Stack = createNativeStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Main"
        component={BottomTabsNavigator}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Record"
        component={Record}
        options={{headerShown: false}}
      />
    </Stack.Navigator>
  );
};

export default StackNavigator;

 

components/home/CreateButton.tsx

// react, react-native
import {View} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {SvgXml} from 'react-native-svg';

// library

// assets, utils, realm
import {svg} from '../../assets/svg';

// component

// style
import {CreateButton as Style} from '../../styles/home.styles';

const CreateButton = () => {
  const navigation = useNavigation();

  const onNavigationPress = () => {
    navigation.navigate('Record');
  };

  return (
    <Style.button onPress={onNavigationPress}>
      <View>
        <SvgXml xml={svg.plus} fill="#FFA800" />
      </View>
    </Style.button>
  );
};

export default CreateButton;