reactnavigation 点击底部tab怎么传递参数?

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

例如：

<Tab.Screenname="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.NavigatorinitialRouteName="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.Screenname="Home"component={HomeScreen}options={{tabBarLabel: 'Home',}}/><Tab.Screenname="Settings"component={SettingsScreen}options={{tabBarLabel: 'Settings',}}/></Tab.Navigator>);
}

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