如何在选项卡导航器中向选项卡添加图标?

Question

const OneNav = createStackNavigator({
Home: {screen: pages.Home},
Social: {screen: pages.Social},
House: {screen: pages.House},
},{
initialRouteName: 'Home',
});
const TwoNav = createStackNavigator({
Home: {screen: Two}
},{
initialRouteName: 'Home',
});
const TabNav = createBottomTabNavigator({
Home: {screen: OneNav},
Interact: {screen: TwoNav},
},{
initialRouteName: 'Check',
defaultNavigationOptions: {
headerTitle: () => (
<View>
<Logo />
</View>)
}
});

如何在此处向选项卡导航器中的每个选项卡添加图标？现在只显示文本。我应该向 TabNav 添加什么来添加主页和交互的图标？

Answer 1

以下是您可以尝试的代码：

// You can import Ionicons from @expo/vector-icons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
export default createBottomTabNavigator(
{
Home: HomeScreen,
Settings: SettingsScreen,
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
// Sometimes we want to add badges to some icons.
// You can check the implementation below.
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Settings') {
iconName = `ios-options`;
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
);

您可以从他们的官方文档中阅读更多内容

我希望这有帮助....谢谢:)