可以通过在底部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传递参数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
