![](/img/trans.png)
[英]Label of createBottomTabNavigator not showing - React Native
[英]Icons not showing in createBottomTabNavigator in react native
在 react native 的 createBottomTabNavigator 中未显示图标。 我猜图标没有渲染。 我尝试了以下代码。 执行代码后得到如下结果。 尝试在代码中使用https://oblador.github.io/react-native-vector-icons图标,但没有一个图标设置正确。
import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator({
Home: {
screen:HomeScreen,
navigationOptions: {
tabBarIcon: ({ focused, tintColor })=> <Icon name="ios-mail" color={tintColor} size={14}/>
},
},
tabBarOptions: {
showLabel: false,
activeTintColor: '#0a0a0a',
style: {
backgroundColor: '#f7f7f7',
height: 30,
borderTopWidth: 1,
borderTopColor: 'red'
}
}
});
export default createAppContainer(TabNavigator);
再次运行此命令yarn react-native run-android
这适用于我的项目
打开 your_react_native_project->android -> app -> build.gradle 文件并将下面的代码放在文件末尾。
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
并将下面的代码放在依赖块中。
implementation project(':react-native-vector-icons')
这适用于我的项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.