【react-native】react-linkでreact-native-vector-iconsをアプリに紐付けてアイコンを表示する

react-nativeにてreact-native-vector-icons/FontAwesomeでナビゲーションバーの左側に

アイコンを表示しようとしたのですが、下記のようにそのまま指定しても以下のようにバツ印になって

正しく表示されない。

どうやらAwesomeにアクセスするにはreact-linkを使ってreactとFontAwesomeを直接

繋げる必要があるみたいです。

react-native link
react-native run-android

の後に

npm i react-native-vector-iconsを実行

全体コードがこちら。

</pre>
import React from 'react';
import { View, StyleSheet} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import NavigationBar from 'react-native-navbar';
import { Actions } from 'react-native-router-flux';
const rightButtonConfig = {
title: 'Save',
tintColor: 'blue',
handler: () => console.log('Saved'),
};

const titleConfig = {
title: 'Home',
};

const MainNavigationBar = (props) => {

return (
<View>
<NavigationBar
title={titleConfig}
rightButton={rightButtonConfig}
leftButton={
<Icon name="home" size={30} onPress={() => Actions.pop()} />
}
style={styles.container}
/>
</View>
);
};

const styles = StyleSheet.create({
container: {
backgroundColor: '#ADD8E6',
},
});
export default MainNavigationBar;
<pre>

ナビゲーションの画像の設定は以上で完了。晴れてアイコンを追加することができました。