Help us understand the problem. What is going on with this article?

react-nativeをver0.57.8へアップグレードしたメモ

More than 1 year has passed since last update.

AutoScale Advent Calendar 2018 10日目の記事です。
AutoScaleではスマートで効率的な Twitter アカウント運用ツールSocialDogの開発運用をしていますt0m0120です。最近ガンダムNTを見てきました。react-narrative。

0.55.4で開発していた際に

  • 英語と日本語で文字のlineheightがズレる
  • 日本語変換が通常で出来ない
  • Xcode10で普通にビルド出来ない

等を解決したいためにアップデートしたのでメモ
CHANGELOG.md通りですんなりいけたので過去のverupより滅茶苦茶楽でした。

react-nativeのupdate

package.jsonのreactとreact-nativeのversionを変更する。

"react": "^16.3.2",
"react-native": "0.55.4",

"react": "^16.5.0",
"react-native": "0.57.8",

$ yarn

.babelrcへmetro-react-native-babel-presetを追加する

.babelrc

  {
    "presets": ["module:metro-react-native-babel-preset"]
  }

babel-upgradeをインストールしbabelをupdateする

babel-upgradeをインストールしbabel周りのアップデートをかける

$ npm i -g babel-upgrade
$ babel-upgrade --write

$ yarn
$ cd ./ios
$ bundle exec pod install

package各種

ビルドまでは上記で問題なく通ったのでpackageやjsの書き方でのエラー修正

native-baseのerror

error: bundling failed: Error: Unable to resolve module `react-native/Libraries/Renderer/shims/ReactNativePropRegistry` from `/Users/native/node_modules/native-base/dist/src/utils/computeProps.js`: Module `react-native/Libraries/Renderer/shims/ReactNativePropRegistry` does not exist in the Haste module map

native-baseを最新版にupdateして解決

react-native-highchartsが表示されない

<ChartView
  style={{flex: 1}}
  config={config}
  options={options}
  stock={true}
  originWhitelist={['']} // add!!
/>

Highchart 1.0.2 doesn't rendering in react-native 0.56.0 · Issue #83 · TradingPal/react-native-highcharts · GitHub

JSON value 'auto34' of type NSString cannot be converted to a YGValue. Did you forget the % or pt suffix?

上記エラーが出る

原因はNativeBaseのHeaderとFooterのstyleへheight:autoを渡していた為に起きるようなのでheader/footerから高さを消すかheaderとfooterを自前のに変更して解決。

Invariant Violation: Nesting of within is not currently supported.

不変違反:内ののネストは現在サポートされていません。
https://github.com/facebook/react-native/issues/22569
Textの中にView使えなくなっていた為修正。

<Text>
  text render
  <View />
</Text>

キーボード入力が2回打たないと反応しなくなる

過去Verで日本語変換ができなくなるバグ対策のコードが邪魔しているようだったので変換対策のコードを削除

  shouldComponentUpdate(nextProps: Props) {
    if (is_android()) {
      return true;
    }
    const { value } = this.props;
    return nextProps.value === '' || value === nextProps.value;
  }

NativeBase のIconコンポーネントが別のアイコンを表示する

GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling.

NativeBaseと同じ6.1.0にreact-native-vector-iconsをアップデート

package.json

react-native-vector-icons: '6.1.0'
$ react-native unlink react-native-vector-icons
$ yarn
$ react-native link

以上で一通り動く様になりアップデート出来ました。
個人的にReactでもNativeでもUIComponent集が好きではなくてversion upの度に変更追いかけたりする手間が増えるので暇見てNativeBaseはプロジェクトから消して自前のに置き換えていこうと思っています。

t0m0120
autoscale
Twitter アカウント管理サービス「SocailDog」を開発・運営するスタートアップ
https://autoscale.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away