react navigation中点击底部tab怎么传递参数
作者：小妖怪的夏天
本文主要介绍了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传递参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！