可以通过在底部tab的onPress事件中调用navigation.navigate方法,并在第二个参数中传递参数来实现传递参数。 例如: <Tab.Screen name
可以通过在底部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是React Navigation中用于创建底部导航栏的组件,它可以通过一些配置来自定义底部导航栏的样式和行为。
以下是一些常用的Tab.Navigator配置:
以下是一个示例代码:
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传递参数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: reactnavigation中点击底部tab怎么传递参数
本文链接: https://lsjlt.com/news/211223.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0