快捷導(dǎo)航

react navigation中點(diǎn)擊底部tab怎么傳遞參數(shù)

更新時(shí)間：2023年04月25日 08:53:57 作者：小妖怪的夏天

本文主要介紹了react navigation中點(diǎn)擊底部tab怎么傳遞參數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

可以通過(guò)在底部tab的onPress事件中調(diào)用navigation.navigate方法，并在第二個(gè)參數(shù)中傳遞參數(shù)來(lái)實(shí)現(xiàn)傳遞參數(shù)。

例如：

<Tab.Screen
  name="Home"
  component={HomeScreen}
    options={({ route, navigation }) =>({
     tabBarButton: (props) => (
      <TouchableOpacity
        {...props}
        onPress={() => {
          console.log(props)
          console.log(navigation)
          // 傳遞參數(shù)
          navigation.navigate('掃一掃', { page: 'aaa' });
        }}
      />
    ),
  })} 
/>

在HomeScreen組件中可以通過(guò)route.params獲取傳遞的參數(shù)。

例如：

function HomeScreen({ route }) {
  const { param1, param2 } = route.params;
  // 使用傳遞的參數(shù)
  return (
    <View>
      <Text>{param1}</Text>
      <Text>{param2}</Text>
    </View>
  );
}

Tab.Navigator 配置

Tab.Navigator是React Navigation中用于創(chuàng)建底部導(dǎo)航欄的組件，它可以通過(guò)一些配置來(lái)自定義底部導(dǎo)航欄的樣式和行為。

以下是一些常用的Tab.Navigator配置：

initialRouteName：指定初始路由名稱(chēng)。
tabBarOptions：配置底部導(dǎo)航欄的樣式和行為，例如顏色、圖標(biāo)、標(biāo)簽等。
screenOptions：配置每個(gè)Tab.Screen的默認(rèn)選項(xiàng)，例如標(biāo)題、圖標(biāo)等。
tabBarIcon：自定義底部導(dǎo)航欄圖標(biāo)的組件。
tabBarLabel：自定義底部導(dǎo)航欄標(biāo)簽的組件。

以下是一個(gè)示例代碼：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function MyTabs() {
? return (
? ? <Tab.Navigator
? ? ? initialRouteName="Home"
? ? ? tabBarOptions={{
? ? ? ? activeTintColor: '#e91e63',
? ? ? ? inactiveTintColor: '#888',
? ? ? }}
? ? ? screenOptions={({ route }) => ({
? ? ? ? tabBarIcon: ({ focused, color, size }) => {
? ? ? ? ? let iconName;

? ? ? ? ? if (route.name === 'Home') {
? ? ? ? ? ? iconName = focused
? ? ? ? ? ? ? ? 'home'
? ? ? ? ? ? ? : 'home-outline';
? ? ? ? ? } else if (route.name === 'Settings') {
? ? ? ? ? ? iconName = focused ? 'settings' : 'settings-outline';
? ? ? ? ? }

? ? ? ? ? // You can return any component that you like here!
? ? ? ? ? return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
? ? ? ? },
? ? ? })}
? ? >
? ? ? <Tab.Screen
? ? ? ? name="Home"
? ? ? ? component={HomeScreen}
? ? ? ? options={{
? ? ? ? ? tabBarLabel: 'Home',
? ? ? ? }}
? ? ? />
? ? ? <Tab.Screen
? ? ? ? name="Settings"
? ? ? ? component={SettingsScreen}
? ? ? ? options={{
? ? ? ? ? tabBarLabel: 'Settings',
? ? ? ? }}
? ? ? />
? ? </Tab.Navigator>
? );
}

在這個(gè)示例中，我們使用了MaterialCommunityIcons組件來(lái)自定義底部導(dǎo)航欄的圖標(biāo)，使用了activeTintColor和inactiveTintColor來(lái)配置選中和未選中狀態(tài)下的顏色，使用了screenOptions來(lái)配置每個(gè)Tab.Screen的默認(rèn)選項(xiàng)。

到此這篇關(guān)于react navigation中點(diǎn)擊底部tab怎么傳遞參數(shù)的文章就介紹到這了,更多相關(guān)react navigation tab傳遞參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: