react native /导航改变底部点击图标

Question

有像photo这样的问号(或错误标记)。输入图片描述

我想把主图标改成这个图标。

import { Entypo } from '@expo/vector-icons';
<Entypo name="home" size={24} color="black" />

我是初学者，所以如果你上传完整的代码，我很感激。

感谢阅读!

这是代码:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, Text } from 'react-native';
const HomeScreen = () => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
};
const ProfileScreen = () => {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>This is profile</Text>
</View>
);
};
const Tab = createBottomTabNavigator();
const App = () => {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
</NavigationContainer>
);
};
export default App;

Answer 1

你可以添加自定义视图没有字体awesome可以使用图像源通过使用选项道具例如

<Tab.Screen 
name={'home'}
component={HomeScreen}
options={{
headerShown: false,
tabBarIcon: ({ focused }) => (
<View style={focused ? [styles(theme, lang).tabBarIconStyle, { backgroundColor: theme.color.darkGrey }] : styles(theme, lang).tabBarIconStyle}>
<Image
source={require('../../src/assets/icons/home.png')}
style={
focused
? styles(theme, lang).focusedIcon
: styles(theme, lang).unFocusedIcon
} />
<Text style={focused ? [styles(theme, lang).tabBarLabelStyle, { color: theme.color.white }] : [styles(theme, lang).tabBarLabelStyle, { color: theme.color.darkGrey }]}>{localizedString(LocalizationKeys.HOME)}</Text>
</View>
),
}}
/>