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!!
/>
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コンポーネントが別のアイコンを表示する
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はプロジェクトから消して自前のに置き換えていこうと思っています。