Develop/React & React Native

react-navigation

안다희 2019. 7. 7. 23:57
728x90

 

 

 

React Navigation · Routing and navigation for your React Native apps

Routing and navigation for your React Native apps

reactnavigation.org

gesture-handler 설치할 때

link하면 오류가 났음.

맨 밑에 설정까지 해줬는데.

 

https://github.com/kmagiera/react-native-gesture-handler/issues/671

 

Android 'react-native-gesture-handler' error · Issue #671 · kmagiera/react-native-gesture-handler

When I follow the instruction by the react-navigation website : https://reactnavigation.org/docs/en/getting-started.html. react-native link react-native-gesture-handler and then change the MainActi...

github.com

 

나와 같은 문제를 가진 사람이 있었다.

이걸 따라해보니 실행은 된다! 그러나 여전히 

이 에러는 난다.

그래서 gesture-handler 를 unlink해줬더니

아무 에러도 안난다!!! 결론 : link는 하지 말고 공식 문서 맨 아래 

Hybrid iOS Applications

부분과 react-native.config.js 파일을 추가하면 된다!!!

환경설정하는데만 3시간...! (사실 아주 간단한 문제였다 ㅜㅜ)

기분이 좋아졌다!!!

 

+ unlink하는걸로 안됨,,,, ios 에서 pod install도 해주기

 

https://github.com/kmagiera/react-native-gesture-handler/issues/494

 

null is not an object ( evaluating 'RNGestureHandlerModule.Direction') · Issue #494 · kmagiera/react-native-gesture-handler

Hi, I'm using react-native-gesture-handler within react-navigation and getting this error null is not an object ( evaluating 'RNGestureHandlerModule.Direction') my project is just simpl...

github.com

 

그 외 에러 참고!

 

 

 

요약

// 공식문서 그대로!
yarn add react-navigation
yarn add react-native-gesture-handler

podfile에
 pod 'React', :path => '../node_modules/react-native', :subspecs => [
    . . . // other subspecs
    'RCTLinkingIOS',
    . . .
  ]
  
  // 그리고 추가로 issue에서 얻은 것들
  pod install (in ios folder)

 

 

 

https://philip1994.tistory.com/96

 

[react-native] react-navigation사용하기

이번에는 react-native 에서 화면이동을 진행하려고한다. react-native에서 화면 이동은 여러가지 모듈이 있지만, 이 글에서는 facebook에서 만든 navigation을 이용할것이다. 모듈에 대한 설명과 메소드들의 설명..

philip1994.tistory.com

그리고 이 블로그를 따라해보니 네비게이션 성공!!!!! 오마이갓,,,,

 

import React, {Component} from 'react';

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

class Second extends Component {

    render() {



        const {navigation} = this.props;



        return (

            <View style={{flex:1,justifyContent: 'center'}} >

                <TouchableOpacity

                        onPress={()=>{

                            navigation.goBack()

                        }}

                >

                    <Text style={{alignItems: 'center'}}>Second Page</Text>

                </TouchableOpacity>

            </View>

        );

    }

}



export default Second;

 

 

no bundle url present

이러한 에러가 나서 clean project

 

 

https://www.npmjs.com/package/react-native-clean-project

 

react-native-clean-project

Automating the cleaning of a React Native Project

www.npmjs.com

 

설치하고 청소하면 됨!!