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 => [
'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)

7. npm 서버를 실행한다.

$ npm start

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

참조 :

Show your support

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