如何创建导航反应原生？

Question

我在 Map 屏幕上有一个带有轮播屏幕的应用程序（当我运行应用程序时）和 map 屏幕我有带有 2 个选项卡的底部导航栏：tab1 和 tab2。 一旦我点击 tab1 -> 我想在顶部导航栏上选择 title='tab1' 。 与tab2相同。

这是根导航器：

  <Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: '#C70066' } }}>
      <Stack.Screen name="Carousel" component={CarouselScreen} />
      <Stack.Screen
        name="Main"
        component={TabNavigator}
      
      />
   </Stack.Navigator>

TabNavigator 是这样的：

<Tab.Navigator tabBar={TabBar} >
  <Tab.Screen
    name="Tab1"
    component={Screen1}
    options={{
      tabBarAccessibilityLabel: "Tab1",
    }}
  />
  <Tab.Screen
    name="Tab2"
    component={Screen2}
    options={{
      tabBarAccessibilityLabel: "Tab2",
    }}
  />
</Tab.Navigator>

它应该如下所示：

我还需要设置 Stack.Navigator 的样式并添加图标 + 下拉列表； 我添加了唯一的背景颜色，如何设置 rest 的样式？

Answer 1

您可以像这样向标签导航添加样式和图标

 <Tab.Screen name="Tab1" component={Screen1} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={require("../assets/icons/transaction.png")} resizeMode="contain" style={{ width: 30, height: 30, tintColor: focused? '#C70066': 'gray', }} /> <Text style={{ color: focused? 'red': 'yellow', }}> Tab1 </Text> </View> ), }} />

下面，我将展示有关如何添加自定义选项卡导航的代码，您可以看到我将选项卡导航单独保存在名为“导航”的文件夹（./app/navigation/tabs）中的文件“tabs.js”中)

 import React from 'react'; import {View, Image, TouchableOpacity, Text, StyleSheet} from 'react-native'; import { createBottomTabNavigator, BottomTabBar, } from '@react-navigation/bottom-tabs'; import LinearGradient from 'react-native-linear-gradient'; import {Home} from '../screens'; import {COLORS, FONTS, icons} from '../constants'; const Tab = createBottomTabNavigator(); const TabBarCustomButtom = ({children, onPress}) => { return ( <TouchableOpacity style={{ top: -30, justifyContent: 'center', alignItems: 'center', ...styles.shadow, }} onPress={onPress}> <LinearGradient colors={[COLORS.primary, COLORS.secondary]} style={{width: 70, height: 70, borderRadius: 35}}> {children} </LinearGradient> </TouchableOpacity> ); }; const Tabs = () => { return ( <Tab.Navigator tabBarOptions={{ showLabel: false, style: { position: 'absolute', bottom: 0, left: 0, right: 0, elevation: 0, backgroundColor: COLORS.white, borderTopColor: 'transparent', height: 100, }, }}> <Tab.Screen name="Home" component={Home} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={icons.home} resizeMode="contain" style={{ width: 30, height: 30, tintColor: focused? COLORS.primary: COLORS.black, }} /> <Text style={{ color: focused? COLORS.primary: COLORS.black, ...FONTS.body5, }}> HOME </Text> </View> ), }} /> <Tab.Screen name="Portfolio" component={Home} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={icons.pie_chart} resizeMode="contain" style={{ width: 30, height: 30, tintColor: focused? COLORS.primary: COLORS.black, }} /> <Text style={{ color: focused? COLORS.primary: COLORS.black, ...FONTS.body5, }}> PORTFOLIO </Text> </View> ), }} /> <Tab.Screen name="Transaction" component={Home} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={icons.transaction} resizeMode="contain" style={{ width: 30, height: 30, tintColor: COLORS.white, }} /> </View> ), tabBarButton: (props) => <TabBarCustomButtom {...props} />, }} /> <Tab.Screen name="Prices" component={Home} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={icons.line_graph} resizeMode="contain" style={{ width: 30, height: 30, tintColor: focused? COLORS.primary: COLORS.black, }} /> <Text style={{ color: focused? COLORS.primary: COLORS.black, ...FONTS.body5, }}> PRICES </Text> </View> ), }} /> <Tab.Screen name="Settings" component={Home} options={{ tabBarIcon: ({focused}) => ( <View style={{alignItems: 'center', justifyContent: 'center'}}> <Image source={icons.settings} resizeMode="contain" style={{ width: 30, height: 30, tintColor: focused? COLORS.primary: COLORS.black, }} /> <Text style={{ color: focused? COLORS.primary: COLORS.black, ...FONTS.body5, }}> SETTINGS </Text> </View> ), }} /> </Tab.Navigator> ); }; const styles = StyleSheet.create({ shadow: { shadowColor: COLORS.primary, shadowOffset: { width: 0, height: 10, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, }, }); export default Tabs;

这是根导航器：

 import React from 'react'; import {createStackNavigator} from '@react-navigation/stack'; import {NavigationContainer} from '@react-navigation/native'; import Tabs from './app/navigation/tabs'; const Stack = createStackNavigator(); const App = () => { return ( <NavigationContainer> <Stack.Navigator screenOptions={{ headerShown: false, }} initialRouteName={'Home'}> <Stack.Screen name="Home" component={Tabs} /> </Stack.Navigator> </NavigationContainer> ); }; export default App;