storeに出すくらいのアプリなら、見た目くらいしっかりしなくてはと思い
それらしく見えるヘッダーを追加することにした。
公式を見ながらheaderを追加。がビルドができない。
コマンドの中を見るとThe development server returned response error code: 500と出た
問題となっているコードがこちら。
import React from ‘react’;
import { View } from ‘react-native’;
import { Header} from ‘react-native-elements’;
const MainHeader = () => {
const { Title } = styles;
return (
<View>
<Header
leftComponent={{ icon: ‘menu’, color: ‘#fff’ }}
centerComponent={{ text: ‘MY TITLE’, color: ‘#fff’ }}
rightComponent={{ icon: ‘home’, color: ‘#fff’ }}
/>
</View>
);
};
const styles = {
Title: {
color: ‘#fff’
},
};
export default MainHeader;
Headerもreact-native-elementsから取得できている。他も特にエラーになるような要因は
見つからない。
これだけ見るとサーバー側が悪いように見えるがcli.jsの中を見ると
error: Error: Unable to resolve module `react-native-vector-icons/Zocial` from
`node_modules\react-native-elements\src\helpers\getIconType.js`:
react-native-vector-icons/Zocial could not be found within the project.
となっていた。
react-native-vector-iconsが使えない、若しくは見つからないとのことなので
npm i react-native-vector-iconsでインストール。途中エラーがでますがここでは気にしなくても良い。
これでヘッダーが出るようになれば解決です。
という訳で今回はheaderのcomponent内にあるアイコン定義ができていないのが原因でした。
