我在使用createBottomTabNavigator
显示图标时遇到问题。我使用的是react-native-ionicons,如果在代码中放入任何种类的Icon,它都可以正常工作,但没有显示在选项卡栏上。 我已经设置了showIcon: true
。
这是我正在尝试的代码:
import React from 'react';
import {View, Text} from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from './screens/HomepageScreen';
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const BottomNavigation = createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
tabBarOptions: {
inactiveTintColor: 'gray',
swipeEnabled: true,
showLabel: true,
showIcon: true
},
}
);
export default createAppContainer(BottomNavigation);
HomepageScreen.js:
import React from 'react';
import {View, Text, Image, ScrollView} from 'react-native';
import {Card, CardItem, Right, Left} from 'native-base';
import {Header} from 'react-native-elements';
import Icon from 'react-native-ionicons'
class HomeScreen extends React.Component {
state = {
news: []
}
static navigationOptions = {
title: 'Noticias',
tabBarIcon: ({tintColor}) => {
<Icon style={{width: 10, height: 10, color: 'black'}} ios="ios-add" android="md-add" />
}
}
render() {
return (
//code
);
}
}
export default HomeScreen;
我想念什么吗?
答案 0 :(得分:0)
大小可能太小,如果要使用color={tintColor}
,则需要放置tintColor
import React from 'react';
import {View, Text, Image, ScrollView} from 'react-native';
import {Card, CardItem, Right, Left} from 'native-base';
import {Header} from 'react-native-elements';
import Icon from 'react-native-ionicons'
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Noticias',
tabBarIcon: ({tintColor}) => {
<Icon color={tintColor} ios="ios-add" android="md-add" />
}
}
render() {
return (
//code
);
}
}
export default HomeScreen;
希望有帮助!