react-nativeのnpmモジュールを作成してみる

Static Libraryの作成

XcodeでNew>Projectをする

iOS、Framework & Libraryを選択し、Cocoa Touch Static Libraryを選択

Header Search Path

$(SRCROOT)/../../React
$(SRCROOT)/../react-native/React
$(SRCROOT)/node_modules/react-native/React

BridgeModuleの作成

githubを参照

https://github.com/hrk-ys/react-native-userdefaults/tree/master/RNUserDefaultsManager

JS

package.json

$ npm init

package名やversionなど適度に変更

{
  "name": "react-native-userdefaults",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}

index.js

github参照

https://github.com/hrk-ys/react-native-userdefaults/blob/master/index.js

Example

$ react-native init UserDefaultsExample

package.json

依存モジュールに作成中のモジュールを追加

"dependencies": {
  "react-native": "^0.4.4",
  "react-native-userdefaults": "file:../"
}

Nativeプロジェクト追加

Library に node_modules/react-native-userdefaults/RNUserDefaults.xcodeproj/ を追加

Linked Frameworks and LibrariesにlibRNUserDefaults.aを追加

開発スタイル

これが正しいのか不明・・・

index.jsやRNUserDefaultsManager.[mh]を更新したら、Exampleプロジェクトの方で、以下を実行

$npm uninstall react-native-userdefaults
$npm install

ReactNativeでImages.xcassetsの画像を使う方法

前回書いた通り、


pod 'React/RCTImage'

使うところは



ただし、そのままではファイルが読み込めないので、

起動スクリプトにImage.xcassetsのディレクトリの場所を指定する

(JS_DIR=`pwd`/ReactComponent; ASSET_DIR=`pwd`//Images.xcassets; cd Pods/React; npm run start -- --root $JS_DIR --assetRoots $ASSET_DIR)


まだまだはまりどころが多いな・・・。