Merge pull request #853 from thundersdata-frontend/rn-issue

fix: 缩小picker的scale,并配置文字的超出效果
thundersdata-frontend · Apr 18, 2024 · b3353e4 · b3353e4
2 parents 5db2633 + 57f5fb6
commit b3353e4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/.changeset/lemon-tomatoes-peel.md b/.changeset/lemon-tomatoes-peel.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-picker': patch
+---
+
+fix: 缩小picker的scale,并配置文字的超出效果
diff --git a/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx b/packages/react-native-picker/src/components/WheelPicker/WheelPickerItem.tsx
@@ -23,7 +23,7 @@ function WheelPickerItem({ textStyle, style, visibleRest, height, option, index,
     opacityOutputRange.push(y);
   }
 
-  const scaleOutputRange = [1.3];
+  const scaleOutputRange = [1.1];
   for (let x = 1; x <= visibleRest + 1; x++) {
     const y = scaleFunction(x);
     scaleOutputRange.unshift(y);
@@ -52,7 +52,9 @@ function WheelPickerItem({ textStyle, style, visibleRest, height, option, index,
 
   return (
     <Animated.View style={[styles.option, style, { opacity, transform: [{ rotateX }, { scale }] }]}>
-      <Animated.Text style={textStyle}>{option?.label}</Animated.Text>
+      <Animated.Text style={textStyle} numberOfLines={1} ellipsizeMode={'tail'}>
+        {option?.label}
+      </Animated.Text>
     </Animated.View>
   );
 }