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传递参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
解决React报错Functions are not valid as 
这篇文章主要为大家介绍了React报错Functions are not valid as a React child解决详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-12-12
详解如何在React中优雅的使用addEventListener
这篇文章主要为大家详细介绍了如何在React中优雅的使用addEventListener,文中的示例代码简洁易懂,对大家学习React有一定的帮助,需要的可以参考一下2023-01-01


最新评论