Как вставить в React Native функциональный компонент - PullRequest
Новая
       58

Как вставить в React Native функциональный компонент

2 голосов
/ 27 мая 2020

Я пытаюсь добавить анимацию в свое собственное приложение 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>

1 Ответ

0 голосов
/ 08 июля 2020

Вы можете это сделать

это должно работать

Вы можете увидеть этот пример здесь

пример в expo

Это работа

или

Перед возвратом 

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

затем в объеме возврата 

bottom:intrepolate
...