diff options
Diffstat (limited to 'src/view/com/pager/TabBar.tsx')
-rw-r--r-- | src/view/com/pager/TabBar.tsx | 18 |
1 files changed, 15 insertions, 3 deletions
diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index b257559bc..8e89b9c1f 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -237,12 +237,25 @@ export function TabBar({ opacity: 0, } } + + function getScaleX(index: number) { + const textWidth = textLayoutsValue[index].width + const itemWidth = layoutsValue[index].width + const minIndicatorWidth = 45 + const maxIndicatorWidth = itemWidth - 2 * CONTENT_PADDING + const indicatorWidth = Math.min( + Math.max(minIndicatorWidth, textWidth), + maxIndicatorWidth, + ) + return indicatorWidth / contentSize.get() + } + if (textLayoutsValue.length === 1) { return { opacity: 1, transform: [ { - scaleX: textLayoutsValue[0].width / contentSize.get(), + scaleX: getScaleX(0), }, ], } @@ -261,7 +274,7 @@ export function TabBar({ scaleX: interpolate( dragProgress.get(), textLayoutsValue.map((l, i) => i), - textLayoutsValue.map(l => l.width / contentSize.get()), + textLayoutsValue.map((l, i) => getScaleX(i)), ), }, ], @@ -429,7 +442,6 @@ const styles = StyleSheet.create({ }, itemText: { lineHeight: 20, - minWidth: 45, textAlign: 'center', }, outerBottomBorder: { |