react navigation中点击底部tab怎么传递参数

 更新时间:2023年04月25日 08:53:57   作者:小妖怪的夏天  
本文主要介绍了react navigation中点击底部tab怎么传递参数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

可以通过在底部tab的onPress事件中调用navigation.navigate方法,并在第二个参数中传递参数来实现传递参数。

例如:

<Tab.Screen
  name="Home"
  component={HomeScreen}
    options={({ route, navigation }) =>({
     tabBarButton: (props) => (
      <TouchableOpacity
        {...props}
        onPress={() => {
          console.log(props)
          console.log(navigation)
          // 传递参数
          navigation.navigate('扫一扫', { page: 'aaa' });
        }}
      />
    ),
  })} 
/>

在HomeScreen组件中可以通过route.params获取传递的参数。

例如:

function HomeScreen({ route }) {
  const { param1, param2 } = route.params;
  // 使用传递的参数
  return (
    <View>
      <Text>{param1}</Text>
      <Text>{param2}</Text>
    </View>
  );
}

Tab.Navigator 配置

Tab.Navigator是React Navigation中用于创建底部导航栏的组件,它可以通过一些配置来自定义底部导航栏的样式和行为。

以下是一些常用的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来配置选中和未选中状态下的颜色,使用了screenOptions来配置每个Tab.Screen的默认选项。

到此这篇关于react navigation中点击底部tab怎么传递参数的文章就介绍到这了,更多相关react navigation tab传递参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react-redux多个组件数据共享的方法

    react-redux多个组件数据共享的方法

    这篇文章主要介绍了react-redux多个组件数据共享的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • React大屏可视化脚手架教程示例

    React大屏可视化脚手架教程示例

    这篇文章主要为大家介绍了React大屏可视化脚手架教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • React中实现keepalive组件缓存效果的方法详解

    React中实现keepalive组件缓存效果的方法详解

    由于react官方并没有提供缓存组件相关的api(类似vue中的keepalive),在某些场景,会使得页面交互性变的很差。所以本文为大家介绍了React中实现keepalive组件缓存效果的方法,希望对大家有所帮助
    2023-01-01
  • 解决React报错Functions are not valid as a React child

    解决React报错Functions are not valid as 

    这篇文章主要为大家介绍了React报错Functions are not valid as a React child解决详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React在Dva项目中创建并引用页面局部组件的方式

    React在Dva项目中创建并引用页面局部组件的方式

    这篇文章主要介绍了React在Dva项目中创建并引用页面局部组件的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • React之如何在Suspense中优雅地请求数据

    React之如何在Suspense中优雅地请求数据

    Suspense 是 React 中的一个组件,直译过来有悬挂的意思,能够将其包裹的异步组件挂起,直到组件加载完成后再渲染,本文详细介绍了如何在Suspense中请求数据,感兴趣的小伙伴可以参考阅读本文
    2023-04-04
  • React中的Hooks路由跳转问题

    React中的Hooks路由跳转问题

    这篇文章主要介绍了React中的Hooks路由跳转问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 基于React实现搜索GitHub用户功能

    基于React实现搜索GitHub用户功能

    在本篇博客中,我们将介绍如何在 React 应用中搜索 GitHub 用户并显示他们的信息,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02
  • 关于 React 中 useEffect 使用问题浅谈

    关于 React 中 useEffect 使用问题浅谈

    本文主要介绍了关于React中useEffect使用问题浅谈,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 详解如何在React中优雅的使用addEventListener

    详解如何在React中优雅的使用addEventListener

    这篇文章主要为大家详细介绍了如何在React中优雅的使用addEventListener,文中的示例代码简洁易懂,对大家学习React有一定的帮助,需要的可以参考一下
    2023-01-01

最新评论