[英]BottomNavigation does not show @expo/vector-icons in React Native
I am using the package from https://github.com/timomeh/react-native-material-bottom-navigation . 我正在使用https://github.com/timomeh/react-native-material-bottom-navigation中的包。 The code was taken from the example, but the icons that are used in the example are not loaded.
该代码取自该示例,但是未加载该示例中使用的图标。
I tried to borrow from another library: https://github.com/oblador/react-native-vector-icons . 我试图从另一个库中借用: https : //github.com/oblador/react-native-vector-icons 。 But it also didn't help.
但这也没有帮助。
Here is the full component: 这是完整的组件:
...
import BottomNavigation, { FullTab } from 'react-native-material-bottom-navigation';
import Icon from '@expo/vector-icons/MaterialCommunityIcons'
interface Props {
navigation: NavigationScreenProp<NavigationState, NavigationParams>,
}
interface State {
activeTab: number | string
}
class HomeScreen extends Component<Props, State> {
static navigationOptions = {
header: null,
};
constructor(props: Props) {
super(props);
this.state = {
activeTab: 'games'
}
}
tabs = [
{
key: 'games',
icon: 'gamepad-variant',
label: 'Games',
barColor: '#388E3C',
pressColor: 'rgba(255, 255, 255, 0.16)'
},
{
key: 'movies-tv',
icon: 'movie',
label: 'Movies & TV',
barColor: '#B71C1C',
pressColor: 'rgba(255, 255, 255, 0.16)'
},
{
key: 'music',
icon: 'music-note',
label: 'Music',
barColor: '#E64A19',
pressColor: 'rgba(255, 255, 255, 0.16)'
}
]
renderIcon = icon => ({ isActive }) => (
<Icon size={24} color="white" name={icon} />
)
renderTab = ({ tab, isActive }) => (
<FullTab
isActive={isActive}
key={tab.key}
label={tab.label}
renderIcon={this.renderIcon(tab.icon)}
/>
)
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
{/* Your screen contents depending on current tab. */}
</View>
<BottomNavigation
tabs={this.tabs}
activeTab={this.state.activeTab}
onTabPress={newTab => this.setState({ activeTab: newTab.key })}
renderTab={this.renderTab}
useLayoutAnimation
/>
</View>
);
}
}
...
If you can install and use the expo-vector-icons
module, 如果您可以安装和使用
expo-vector-icons
模块,
There is no problem with your code. 您的代码没有问题。 You can see this in the example of a link I created.
您可以在我创建的链接的示例中看到这一点。
OR 要么
You can try this 你可以试试这个
import { MaterialCommunityIcons } from '@expo/vector-icons'
...
renderIcon = icon => ({ isActive }) => (
<MaterialCommunityIcons size={24} color="white" name={icon} />
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.