首页 > 网络编程 > JavaScript > react navigation中点击底部tab怎么传递参数

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

福牛 4月 25, 2023 32 0

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

例如：

  1. <Tab.Screen
  2.      name=“Home”
  3.      component={HomeScreen}
  4.      options={({ route, navigation }) =>({
  5.          tabBarButton: (props) => (
  6.          <TouchableOpacity
  7.          {…props}
  8.          onPress={() => {
  9.              console.log(props)
  10.              console.log(navigation)
  11.              // 传递参数
  12.              navigation.navigate(‘扫一扫’, { page: ‘aaa’ });
  13.          }}
  14.          />
  15.      ),
  16.      })}
  17. />

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

例如：

  1. function HomeScreen({ route }) {
  2.      const { param1, param2 } = route.params;
  3.      // 使用传递的参数
  4.      return (
  5.      <View>
  6.          <Text>{param1}</Text>
  7.          <Text>{param2}</Text>
  8.      </View>
  9.      );
  10. }

Tab.Navigator 配置

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

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

  • initialRouteName：指定初始路由名称。
  • tabBarOptions：配置底部导航栏的样式和行为，例如颜色、图标、标签等。
  • screenOptions：配置每个Tab.Screen的默认选项，例如标题、图标等。
  • tabBarIcon：自定义底部导航栏图标的组件。
  • tabBarLabel：自定义底部导航栏标签的组件。

以下是一个示例代码：

  1. import { createBottomTabNavigator } from ‘@react-navigation/bottom-tabs’;
  2. import { MaterialCommunityIcons } from ‘@expo/vector-icons’;
  3.  
  4. const Tab = createBottomTabNavigator();
  5.  
  6. function MyTabs() {
  7.      return (
  8.      <Tab.Navigator
  9.      initialRouteName=“Home”
  10.      tabBarOptions={{
  11.      activeTintColor: ‘#e91e63’,
  12.      inactiveTintColor: ‘#888’,
  13.      }}
  14.      screenOptions={({ route }) => ({
  15.      tabBarIcon: ({ focused, color, size }) => {
  16.          let iconName;
  17.  
  18.          if (route.name === ‘Home’) {
  19.          iconName = focused
  20.          ? ‘home’
  21.          : ‘home-outline’;
  22.          } else if (route.name === ‘Settings’) {
  23.          iconName = focused ? ‘settings’ : ‘settings-outline’;
  24.      }
  25.  
  26.          // You can return any component that you like here!
  27.          return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
  28.      },
  29.      })}
  30.      >
  31.      <Tab.Screen
  32.      name=“Home”
  33.      component={HomeScreen}
  34.      options={{
  35.          tabBarLabel: ‘Home’,
  36.      }}
  37.      />
  38.      <Tab.Screen
  39.      name=“Settings”
  40.      component={SettingsScreen}
  41.      options={{
  42.          tabBarLabel: ‘Settings’,
  43.      }}
  44.      />
  45.      </Tab.Navigator>
  46.      );
  47. }

在这个示例中，我们使用了MaterialCommunityIcons组件来自定义底部导航栏的图标，使用了activeTintColor和inactiveTintColor来配置选中和未选中状态下的颜色，使用了screenOptions来配置每个Tab.Screen的默认选项。

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

标签

相关推荐

发表评论