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

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

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

可以通過在底部tab的onPress事件中調(diào)用navigation.navigate方法，并在第二個參數(shù)中傳遞參數(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組件中可以通過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)建底部導航欄的組件，它可以通過一些配置來自定義底部導航欄的樣式和行為。

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

initialRouteName：指定初始路由名稱。
tabBarOptions：配置底部導航欄的樣式和行為，例如顏色、圖標、標簽等。
screenOptions：配置每個Tab.Screen的默認選項，例如標題、圖標等。
tabBarIcon：自定義底部導航欄圖標的組件。
tabBarLabel：自定義底部導航欄標簽的組件。

以下是一個示例代碼：

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>
? );
}

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

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

您可能感興趣的文章:

react-redux多個組件數(shù)據(jù)共享的方法
這篇文章主要介紹了react-redux多個組件數(shù)據(jù)共享的方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-08-08
React大屏可視化腳手架教程示例
這篇文章主要為大家介紹了React大屏可視化腳手架教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-06-06
React中實現(xiàn)keepalive組件緩存效果的方法詳解
由于react官方并沒有提供緩存組件相關的api（類似vue中的keepalive），在某些場景，會使得頁面交互性變的很差。所以本文為大家介紹了React中實現(xiàn)keepalive組件緩存效果的方法，希望對大家有所幫助
2023-01-01
解決React報錯Functions are not valid as
這篇文章主要為大家介紹了React報錯Functions are not valid as a React child解決詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
React在Dva項目中創(chuàng)建并引用頁面局部組件的方式
這篇文章主要介紹了React在Dva項目中創(chuàng)建并引用頁面局部組件的方式,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-07-07
React之如何在Suspense中優(yōu)雅地請求數(shù)據(jù)
Suspense 是 React 中的一個組件，直譯過來有懸掛的意思，能夠?qū)⑵浒漠惒浇M件掛起，直到組件加載完成后再渲染，本文詳細介紹了如何在Suspense中請求數(shù)據(jù)，感興趣的小伙伴可以參考閱讀本文
2023-04-04
React中的Hooks路由跳轉(zhuǎn)問題
這篇文章主要介紹了React中的Hooks路由跳轉(zhuǎn)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
基于React實現(xiàn)搜索GitHub用戶功能
在本篇博客中,我們將介紹如何在 React 應用中搜索 GitHub 用戶并顯示他們的信息,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-02-02
關于?React?中?useEffect?使用問題淺談
本文主要介紹了關于React中useEffect使用問題淺談，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
詳解如何在React中優(yōu)雅的使用addEventListener
這篇文章主要為大家詳細介紹了如何在React中優(yōu)雅的使用addEventListener，文中的示例代碼簡潔易懂，對大家學習React有一定的幫助，需要的可以參考一下
2023-01-01