如何在react-native-navigation中使用基于本机的图标

Question

In my current react native app.

I am using react-native-navigation for general app navigation.

On the other hand, I would like to use native-base for some basic UI elements.

My question is, how do I pass a <Icon name="ios-search"/> from native-base to a react-native-navigation tab?

Based on this wiki. It seems that they only accept an actual image for a tab icon? https://github.com/wix/react-native-navigation/wiki/Top-Level-API

As far as i see it, native-base icons is just a wrapper on react-native-vector-icon. In react-native-vector-icon, there is a getImageResource function that allows me to convert icons into images. How do I do it in native-base?

Answer 1

getImageSource function will be added to the Icon in next version of Native Base.

For now, you can import any Icon family directly from react-native-vector-icons and use getImageSource from there.

import Ionicons from 'react-native-vector-icons/Ionicons';
...
...

getImageSource('ios-home', 20, 'red').then((source) => this.setState({ userIcon: source }));