如何在反应原生功能组件中进行插值答案

【问题标题】：How to interplote in react native functional component如何在反应原生功能组件中进行插值
【发布时间】：2020-05-27 08:01:34
【问题描述】：

我正在尝试向我的 react 本机应用程序添加动画。应用程序很简单，但它有一些动画。动画中的一个是当用户点击屏幕时，屏幕底部会出现一个停靠栏，显示一些图标。我在 youtube 上找到了一些教程，它们对类组件做同样的事情，但我想在功能组件中这样做。我尝试添加它，但它不起作用。

我就是这样做的。我是反应原生动画的新手。

const actionBarY = useRef(new Animated.Value(1)).current;


<TouchableWithoutFeedback onPress={() => scaleInImage(item)}>
  <Animated.View
   key={item.id}
   style={[{ height, width }, { transform: [{ scale: scaleIn }] }]}
  >
    <Image
     style={{ flex: 1, height: null, width: null }}
     source={{ uri: item.urls.regular }}
    />
  </Animated.View>
</TouchableWithoutFeedback>
<Animated.View
 style={{
   position: "absolute",
   left: 0,
   right: 0,
   bottom: actionBarY.interpolate({     // <---- Here I am trying to interpolate value
     inputRange: [0.9, 1],
     outputRange: [0, -80],
   }),
   height: 80,
   backgroundColor: "white",
   flexDirection: "row",
   justifyContent: "space-around",
 }}
>
  <View
   style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
  >
    <TouchableOpacity
     activeOpacity={0.5}
     onPress={() => alert("loadImages")}
    >
      <Ionicons name="ios-refresh" color="white" size={40} />
    </TouchableOpacity>
  </View>
</Animated.View>

【问题讨论】：

标签： reactjs react-native react-animated

【解决方案1】：

你可以这样做

这应该可以工作

你可以在这里看到这个例子

example in expo

它的工作

或

返回之前

const intrepolate= actionBarY.interpolate({      
 inputRange: [0.9, 1],
 outputRange: [0, -80],
}),

然后在返回范围内

bottom:intrepolate

【讨论】：