reactnavigation中点击底部tab怎么传递参数
短信预约 -IT技能 免费直播动态提醒
可以通过在底部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传递参数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
