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 hooks UI与业务逻辑分离必要性技术方案

    react hooks UI与业务逻辑分离必要性技术方案

    这篇文章主要为大家介绍了react hooks UI与业务逻辑分离必要性技术方案详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • react-redux的connect用法详解

    react-redux的connect用法详解

    react-redux是react官方推出的redux绑定库,React-Redux 将所有组件分成两大类一个是UI组件和容器组件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-01-01
  • 详解React项目中eslint使用百度风格

    详解React项目中eslint使用百度风格

    这篇文章主要介绍了React项目中eslint使用百度风格,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • React hook实现简单的websocket封装方式

    React hook实现简单的websocket封装方式

    这篇文章主要介绍了React hook实现简单的websocket封装方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • react组件中的constructor和super知识点整理

    react组件中的constructor和super知识点整理

    这篇文章主要介绍了react组件中的constructor和super知识点整理,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • React中常用的一些钩子函数总结

    React中常用的一些钩子函数总结

    这篇文章给大家总结了React中常用的一些钩子函数,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01
  • react中引入less并支持antd主题换肤方式

    react中引入less并支持antd主题换肤方式

    这篇文章主要介绍了react中引入less并支持antd主题换肤方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React 源码中的依赖注入方法

    React 源码中的依赖注入方法

    这篇文章主要介绍了React 源码中的依赖注入方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • React避坑指南之useEffect 依赖引用类型问题分析

    React避坑指南之useEffect 依赖引用类型问题分析

    这篇文章主要介绍了React避坑指南之useEffect 依赖引用类型问题分析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • React Hook父组件如何获取子组件的数据/函数

    React Hook父组件如何获取子组件的数据/函数

    这篇文章主要介绍了React Hook父组件如何获取子组件的数据/函数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09

最新评论