V2EX › razor1895 的所有回复 › 第 4 页 / 共 17 页

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

1 2 3 4 5 6 7 8 9 10 ... 17

❮

❯

2023-10-24 00:30:37 +08:00

回复了 owen800q 创建的主题 › 程序员 › react native 如何实现这样的底部导航栏

这是一个精简版本的实现

import { useEffect } from 'react';
import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
import FastImage from 'react-native-fast-image';
import { trigger } from 'react-native-haptic-feedback';

import { BlurView } from '@react-native-community/blur';
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import { useQueryClient } from '@tanstack/react-query';

import { TAB_BAR_HEIGHT } from '@/styles';
import { p2d } from '@/utils';
import { pubsub } from '@/utils/pubsub';

import { Badge } from './Badge';

const TabBarIconMap = [
{
inactive: require('@/assets/icons/icon-crushes.png'),
active: require('@/assets/icons/icon-crushes-focused.png'),
style: {
width: p2d(24),
height: p2d(17),
},
},
{
inactive: require('@/assets/icons/icon-news.png'),
active: require('@/assets/icons/icon-news-focused.png'),
style: {
width: p2d(23),
height: p2d(18.596),
},
},
{
inactive: require('@/assets/icons/icon-confessions.png'),
active: require('@/assets/icons/icon-confessions-focused.png'),
style: {
width: p2d(18.35),
height: p2d(17),
},
},
{
inactive: require('@/assets/icons/icon-profile.png'),
active: require('@/assets/icons/icon-profile-focused.png'),
style: {
width: p2d(11),
height: p2d(17),
},
},
];

const TabBarIcon = ({
focused,
index,
tabBarBadge,
}: {
focused: boolean;
index: number;
tabBarBadge?: string | number;
}) => {
const map = TabBarIconMap[index];
return (
<View>
<FastImage
source={focused ? map.active : map.inactive}
style={map.style}
resizeMode='contain'
/>
<Badge visible={!!tabBarBadge} style={styles.badge}>
{tabBarBadge}
</Badge>
</View>
);
};

let showedInviteModal = false;

export function TabBar({ state, descriptors, navigation }: BottomTabBarProps) {
// @ts-ignore
const bottom = global.bottomInset || 0;
const queryClient = useQueryClient();

useEffect(() => {
const disposer = pubsub.subscribe('have_shown_swipe_modal', () => {
showedInviteModal = true;
});

return disposer;
}, []);

return (
<View style={[styles.container, { bottom: Math.max(bottom, 10) }]}>
{Platform.OS === 'ios' && (
<BlurView blurType='xlight' blurAmount={2} style={StyleSheet.absoluteFillObject} />
)}
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];

const isFocused = state.index === index;

const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
trigger('impactMedium');

if (!isFocused && !event.defaultPrevented) {
// The `merge: true` option makes sure that the params inside the tab screen are preserved
navigation.navigate({ name: route.name, merge: true });
}
};

return (
<TouchableOpacity
key={String(index)}
accessibilityRole='button'
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
style={styles.item}
>
<TabBarIcon focused={isFocused} index={index} tabBarBadge={options.tabBarBadge} />
</TouchableOpacity>
);
})}
</View>
);
}

const styles = StyleSheet.create({
container: {
position: 'absolute',
// bottom: 0,
// left: 0,
height: TAB_BAR_HEIGHT,
flexDirection: 'row',
// backgroundColor: 'transparent',
backgroundColor: 'rgba(255,255,255,0.3)',
width: p2d(234),
alignSelf: 'center',
alignItems: 'center',
borderRadius: p2d(10),
overflow: 'hidden',
},
item: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
icon: {
width: p2d(18),
height: p2d(18),
},
badge: {
position: 'absolute',
right: p2d(-5),
top: p2d(-4),
},
});

自己实现 ui 即可

2023-10-24 00:28:16 +08:00

回复了 owen800q 创建的主题 › 程序员 › react native 如何实现这样的底部导航栏

使用 customtabbar

https://github.com/react-navigation/react-navigation/blob/main/packages/bottom-tabs/src/views/BottomTabBar.tsx

2023-10-10 11:57:16 +08:00

回复了 vaaagle 创建的主题 › 汽车 › 买车送女朋友，求推荐，预算是落地 16w 内

@burstlinking 零跑 c11 + 1 ，性价比是真高

2023-10-07 17:00:53 +08:00

回复了 TimeNewRome 创建的主题 › 硬件 › [不懂就问] 扫地机器人买哪个型号的好呀？

留个眼，最近正好也在看扫拖一体机

2023-09-28 14:32:35 +08:00

回复了 williamjing 创建的主题 › Apple › 来说说 macOS 14 Sonoma 吧。

@i979491586 #2 iOS 打包正常，我之前用 beta 版本 xcode 打包就遇到一个问题，无法应用商店提审，后来为了提审核不得不降回 Ventura ，今天刚更新，一点问题都没有