尝试从头开始创建底部选项卡

Question

我试图用自己的自定义图像创建一个底部选项卡，但我被困在了无法继续的地方，因为当我在多个图像上使用touchableOpacity时，它要么不起作用，要么一些图像在这个过程中消失了。我该如何更好地解决这个问题。的图片

1：https://i.stack.imgur.com/ZhyiE.png

很抱歉没有提供更多详细信息

谢谢你的回复，我正试图使用我自己的图标创建底部选项卡，如用户配置文件、主页设置等，例如，如果我按下用户的图片图标，它应该会带我进入用户配置文件页面，如下面所示

现在我在导航方面没有问题，只在图像和可触摸方面有问题。这是完整的代码

enter code here
enter code here
const hereUserHome = () => {
const Stack = createDrawerNavigator()
const Tab = createBottomTabNavigator();
const profileName = "Home"
const chatName = "Chat"
const VideoChatName = "VideoChats"
const VideosName = "Videos"
const MusicName = "Musics"
return (
<View style = {UserHomeStyles.bgd}>
<View ><SignOutUser/></View>
<TouchableOpacity>
<View onPress={() => {goToNextPage()}}>
<Image
animation = {"flipInY"}
duration={1800}
source={require("../../components/logo/user.png")}
style = {UserHomeStyles.logo_profile}
resizeMode = "contain"
/>
</View>
</TouchableOpacity>  


<View>
<TouchableOpacity>
<Image
animation = {"flipInY"}
duration={1800}
source={require("../../components/logo/chat1.png")}
style = {UserHomeStyles.logo_chat}
resizeMode = "contain"
/>
</TouchableOpacity>
</View>

<View>
<TouchableOpacity>
<Image
animation = {"flipInY"}
duration={1800}
source={require("../../components/logo/video_chat.png")}
style = {UserHomeStyles.logo_video_chat}
resizeMode = "contain"
/> 
</TouchableOpacity>
</View>
<View>
<TouchableOpacity>
<Image
animation = {"flipInY"}
duration={1800}
source={require("../../components/logo/video_beast1.png")}
style = {UserHomeStyles.logo_video_beast}`enter code here`
resizeMode = "contain"
/>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity>
<Image
animation = {"flipInY"}
duration={1800}
source={require("../../components/logo/music.png")}
style = {UserHomeStyles.logo_music_beast}
resizeMode = "contain"
/>  
</TouchableOpacity>
</View>
</View> 
)
}
export default UserHome

Answer 1

我认为您想要创建的是一个自定义的底部选项卡导航器。您已经在代码中使用了createBottomTabNavigator。我会放一个示例代码给你一个想法。在这里，您可以用自定义图像替换图标。

import React from 'react';
import { BottomTabNavigationOptions, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Foundation from 'react-native-vector-icons/Foundation';
import Feather from 'react-native-vector-icons/Feather';
import AntDesign from 'react-native-vector-icons/AntDesign';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Discovery from '@src/modules/discovery/screens/Discovery';
import CreatePost from '@src/modules/createPost/CreatePost';
import Notifications from '@src/modules/notifications/Notifications';
import Profile from '@src/modules/profile/screens/Profile';
import HomeStackNavigator from './HomeStackNavigator';
const tabBarOptions: BottomTabNavigationOptions = {
headerShown: false,
tabBarAllowFontScaling: false,
tabBarLabelPosition: 'below-icon',
tabBarActiveTintColor: '#000',
tabBarInactiveTintColor: 'gray',
tabBarShowLabel: false,
};
const MainTabNavigator: React.FC = () => {
const TabStack = createBottomTabNavigator();
return (
<TabStack.Navigator
screenOptions={({ route }): BottomTabNavigationOptions => ({
tabBarIcon: ({ color, size }): React.ReactNode => {
if (route.name === 'Home') {
return <Foundation name="home" size={size} color={color} />;
}
if (route.name === 'Discovery') {
return <Feather name="search" size={size} color={color} />;
}
if (route.name === 'Post') {
return <Feather name="plus-square" size={size} color={color} />;
}
if (route.name === 'Notifications') {
return <AntDesign name="hearto" size={size} color={color} />;
}
if (route.name === 'Profile') {
return <Ionicons name="person-outline" size={size} color={color} />;
}
return <></>;
},
...tabBarOptions,
})}>
<TabStack.Screen name="Home" component={HomeStackNavigator} />
<TabStack.Screen name="Discovery" component={Discovery} />
<TabStack.Screen name="Post" component={CreatePost} />
<TabStack.Screen name="Notifications" component={Notifications} />
<TabStack.Screen name="Profile" component={Profile} />
</TabStack.Navigator>
);
};
export default MainTabNavigator;