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的默认选项。

原文地址：https://blog.csdn.net/ln1010/article/details/130294520

查看更多关于react navigation中点击底部tab怎么传递参数的详细内容...