2017年9月5日火曜日

react nativeでcomponentのimportを相対パスじゃなくて絶対パスで記述したい的なお話

  • このエントリーをはてなブックマークに追加

Web用のreactで書いた内容はこちら
とりあえずこれと同じような感じで、基本的に階層が深くなるほど相対パスを記述するのが面倒なわけで。
特に階層の深さを変更をしたときとか。

ってなわけで今日はこれで簡単にかけますよ的なみたいなお話をば。

基本的にはpackage.jsonのnameプロパティに指定している値からのパスを記述する形でいい。
ということはまずはpackage.jsonの記述から。

{
  "name": "HogeAppName",
  "version": "1.0.0",
  "description": "hogehoge",
  "author": null,
  "license": "",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "test": "node ./node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/samples": "^2.0.2",
    "expo": "^19.0.0",
    "react": "16.0.0-alpha.12",
    "react-native": "https://github.com/expo/react-native/archive/sdk-19.0.0.tar.gz",
    "react-native-indicators": "^0.10.0",
    "react-navigation": "^1.0.0-beta.12",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "jest-expo": "^19.0.5"
  }
}

この赤字を使って指定するっていうことでこういう感じ。

import StyledButton from 'HogeAppName/src/component/StyledButton';

っていう感じで書いてあげればサクッと変更できるのでおすすめ。
特にreact nativeをやり始めたときとかでディレクトリ構造どうするとか悩んでるときとか。
react nativeは割と便利だしそこまで手間がかからないで開発できそうでこれからもTipsは書いていきたい的なみたいな。

Adsense