React Native in iOS #1

기존 프로젝트에 react native view 를 추가 하기.

  1. 프로젝트 root 디렉토리에 package.json 파일을 생성.
{
"name": "앱이름",
"version": "앱버전",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.4.2",
"react-native": "0.42.3"
}
}

react, react-native 버전은 호환이 되어야 함.

2. 앱 기본 디렉토리에서 module을 설치

$ npm install
  • 꽤 오래 걸리는 작업임

3. Podfile 에 다음의 내용을 추가

# Your 'node_modules' directory is probably in the root of your project,
# but if not, adjust the `:path` accordingly
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTImage',
'RCTNetwork',
'RCTWebSocket', # needed for debugging
# Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you are using RN >= 0.42.0
pod "Yoga", :path => "./node_modules/react-native/ReactCommon/yoga"

4. pod install

$ pod install

5. index.ios.js 파일을 만든다. 이 파일이 react native 로 들어갈 파일이다.

6. 프로젝트를 열고 react native 를 부를 부분에 다음과 같은 코드 형태로 붙여준다.

let jsCodeLocation = URL(string: "http://localhost:8081/index.ios.bundle?platform=ios")
let mockData:NSDictionary = ["scores":
[
["name":"Alex", "value":"42"],
["name":"Joel", "value":"10"]
]
]
let rootView = RCTRootView(
bundleURL: jsCodeLocation,
moduleName: "인덱스JS파일에서 정의한 클래스 이름",
initialProperties: mockData as [NSObject : AnyObject],
launchOptions: nil
)
//        let bridge = RCTBridge(delegate: self, launchOptions: nil)
rootView!.frame = CGRect(x:0, y:0, width: MainScreen().width, height: MainScreen().height)
view.addSubview(rootView!)

7. npm 서버를 실행한다.

$ npm start

8. Xcode에서 코드를 실행한다.

참조 : https://facebook.github.io/react-native/releases/next/docs/integration-with-existing-apps.html

Show your support

Clapping shows how much you appreciated HanJu Park’s story.