react-native-reanimated插值宽度百分比

sg2wtvxw 于 2023-05-18 发布在 React

关注(0)|答案(2)|浏览(135)

我正在将一些默认的Animated转换为react-native-reanimated v2，似乎不知道如何将一个值插入字符串百分比。我在文档中也找不到任何与此相关的内容。
从react-native使用Animated，我可以做：

width: widthAnim.interpolate({
   inputRange: [0, 1],
   outputRange: ['0%', '100%'],
})

但是reanized中的interpolate()函数只接受数字参数，那么我怎么能动画化宽度呢？

interpolate(widthAnim.value, [0, 1], ['0%', '100%'])
// err: Type 'string' is not assignable to type 'number'.

react-native

来源：https://stackoverflow.com/questions/71127179/react-native-reanimated-interpolate-width-percentage

2条答案

按热度按时间

sz81bmfz1#

您可以简单地使用模板文字

width: `${widthAnim.value * 100}%`

查看更多official example

赞(0）回复(0）举报 2023-05-18

kmpatx3s2#

一个完整的例子来完成前面的回答：

const searchViewAnimatedWidth = useSharedValue(0);

const searchBoxAnimatedStyle = useAnimatedStyle(() => {
  const interpolatedWidth = interpolate(
    searchViewAnimatedWidth.value,
    [0, 1],
    [40, 100],
    { extrapolateRight: Extrapolation.CLAMP }
  );
  return {
    width: withTiming(`${interpolatedWidth}%`, {
      duration: 500,
      useNativeDriver: false,
    }),
  };
});

<Animated.View 
    style={{...otherStyles,...searchBoxAnimatedStyle}}>

   ... 

</Animated.View>

在你的扳机里

onPress={() => {
  searchViewAnimatedWidth.value = searchViewAnimatedWidth.value == 0 ? 1 : 0;
}}

赞(0）回复(0）举报 2023-05-18

我来回答

react-native-reanimated插值宽度百分比

2条答案

相关问题

热门标签

最新问答