Sangil's blog

https://github.com/ChoiSangIl Admin

React Native 화면 전환 with React Navigation DEV / REACT NATIVE

2020-05-24 posted by sang12


React Native를 이용하여 화면전환 하는 방법을 알아보겠습니다. (https://reactnavigation.org/docs/getting-started/ 해당 페이지를 참고하여 진행하였습니다. )

1. React Navigation을 사용하기 위한 관련 모듈을 설치합니다

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view저는 아래와 같이 오류가... (This is related to npm not being able to find a file) 오잉.. 무슨오류지 그래서 프로젝트 폴더에 node_modules를 삭제하고 다시 설치 해당 명령어를 입력해서 설치했더니 정상 설치 되었습니다 :). 그리고 추가로 npm install 명령어로 삭제했었던 모듈을 설치해줘야합니다!

에뮬을 올리는데 오류가나서 모듈을 설치하는 작업을 여러번 반복하게 되네요. 결국 에뮬은 내리고 다시 node-module를 삭제하고 npm install을 통해 다시 설치했습니다 :( 혹시 몰라서 package.json 파일도 공유합니다.
-package.json

{
  "name": "activity-test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.4.3",
    "@react-navigation/stack": "^5.4.0",
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^2.0.0",
    "react-native-screens": "^2.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

2. Mac은 추가 모듈을 설치해야 합니다 

npx pod-install ios

3. React Navigation import

NavigationContainer를 사용하기 위해 import를 해주고 테스트를 위해 gesture-handler도 import 합니다. (모듈이 설치가 제대로 안된경우는 계속 오류가 날겁니다, 안되시면 노드 모듈이 제대로 설치되었는지 확인해주세요). 그리고 NavigationContainer안의 Text가 제대로 나오는지 확인해봅시다!

-App.js

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

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

class App extends Component {

 render() {
    return (
      <NavigationContainer>
        {<View><Text>react natvie navigation 테스트</Text></View>}
      </NavigationContainer>
    )
  }
}

export default App;

4. react-navigation/stack 설치

또 설치를 해야하네요. 한번에 설치하라고 좀 알려주지..!

npm install @react-navigation/stack

5. navigation container에 stack 추가하기

Navigation Container에서 바로 View를 리턴 해줬던 코드에서, stack에 추가하여 화면을 리턴해주게끔 변경했습니다. 그리고 참고사이트의 예제를 보니 스타일도 적용이 되어 있네요 :). 

-App.js 수정

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

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import 'react-native-gesture-handler';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>react natvie navigation 테스트</Text>
    </View>
  );
}

const Stack = createStackNavigator();

class App extends Component {
 render() {
    return (
      <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
    )
  }
}

export default App;

6. Button을 추가하여, 화면 이동하기 

-App.js 수정

Button을 추가하고 HomeScreen의 인자로 navigation을 받아옵니다. 그리고 버튼이 눌렸을때 navigate함수를 호출하면, 해당 View화면을 불러오게 됩니다.

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

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import 'react-native-gesture-handler';


function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>react natvie navigation 테스트</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

class App extends Component {
 render() {
    return (
      <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

export default App;

-결과

이렇게 ReactNative에서 화면을 전환하는 방법을 알아봤습니다. 뭔가 네이티브보다는 복잡시러운거같기도하고, html 태그같이 화면을 만들어주는 게 신기하기도 하네요 ^^

#리엑트 네이티브 화면 전환 #RN 화면전환 #ReactNative navigation
REPLY

React Native Duplicated files or mocks 오류 DEV / REACT NATIVE

2020-05-17 posted by sang12


무슨.. ReactNative공부하기전에 여러 오류들이 저를 반겨주네요 :( Activity 화면 전환을 테스트 하려고 하는데 아래처럼 Haste module naming collision 이란 오류를 마주했습니다. 프로젝트 네이밍이 어디 겹친건가... Duplicated files or mocks. Please check the console for more info. 

해결 방법으로는  package.json 파일의 네임을 변경해주었습니다. 마우스를 올려보니 네이밍 패턴과 안맞다고나오는데요. 뭐가 안맞는거지.. 프로젝트 생성할때좀 알려주면 얼마나 좋았겠어란 생각이 드네요. 주말에 공부하려 했더니 오류만 잡다가 끝났네요~


#RN Duplicated files or mocks error
REPLY

React Native install_failed_insufficient_storage 오류 DEV / REACT NATIVE

2020-05-17 posted by sang12


리엑트 네이티브 에뮬을 실행하려고하는데 해당 오류를 만났습니다 -> react native install_failed_insufficient_storage 

오류만 보고는 저장공간이 부족해서 그러는 줄 알았는데, 실제 하드 공간이 아닌, 안드로이드에서 사용하는 저장소공간이 부족할 때 나오는거 같습니다. 해결 방법으로는, 안드로이드 스튜디오에 접속해서 사용하는 스토리지 공간을 Wipe Data 기능을 이용해 지워주면 됩니다.



#rn insufficient_storage #react native insufficient_storage오류
REPLY