Привет, я новичок в React Native. Я создал изображение, которое при нажатии расширяет другие кнопки с анимированным видом. Однако с этим кодом кнопки находятся сверху изображения, прежде чем я нажимаю на него, и я хочу, чтобы они отображались только тогда, когда пользователь нажимает на него. Вот это AddButton.js:
import React from "react";
import {View, StyleSheet, TouchableHighlight, Animated, Image} from "react-native";
import {Feather} from "@expo/vector-icons";
import { ScrollView } from "react-native-gesture-handler";
export default class AddButton extends React.Component{
buttonSize = new Animated.Value(1);
mode = new Animated.Value(0);
handlePress = () =>{
Animated.sequence([
Animated.timing(this.buttonSize, {
toValue:0.95,
duration:1
}),
Animated.timing(this.buttonSize, {
toValue:1
}),
Animated.timing(this.mode, {
toValue: this.mode._value === 0 ? 1 : 0
})
]).start();
}
render(){
const sizeStyle ={
transform: [{scale: this.buttonSize}]
};
const infox = this.mode.interpolate({
inputRange:[0,1],
outputRange:[-24, -100]
});
const infoy = this.mode.interpolate({
inputRange:[0,1],
outputRange:[-50, -100]
});
const ytx = this.mode.interpolate({
inputRange:[0,1],
outputRange:[-24, -24]
});
const yty = this.mode.interpolate({
inputRange:[0,1],
outputRange:[-50, -150]
});
const calx = this.mode.interpolate({
inputRange:[0,1],
outputRange:[-24, 50]
});
const caly = this.mode.interpolate({
inputRange:[0,1],
outputRange:[-50, -100]
});
return(
<View style={{position:"absolute",alignItems:"center",justifyContent:"center"}}>
<View>
<Animated.View style={{position:"absolute",left: infox, top: infoy }}>
<View style={styles.secondary}>
<Feather name ="info" size={16} color="black" />
</View>
</Animated.View>
<Animated.View style={{position:"absolute",left: ytx, top: yty }}>
<View style={styles.secondary}>
<Feather name ="youtube" size={16} color="black" />
</View>
</Animated.View>
<Animated.View style={{position:"absolute",left: calx, top: caly }}>
<View style={styles.secondary}>
<Feather name ="calendar" size={16} color="black" />
</View>
</Animated.View>
</View>
<View stlye={{position:"absolute"}}>
<Animated.View style={styles.button, sizeStyle}>
<TouchableHighlight onPress={this.handlePress}>
<Image style={styles.foto} source={require('../assets/rock_in_rio.png')} />
</TouchableHighlight>
</Animated.View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
button:{
alignItems:"center",
justifyContent:"center",
width: 72,
height:72,
borderRadius:36,
backgroundColor:"orange",
shadowColor:"orange",
shadowOpacity:0.1,
shadowOffset: {width:0, height:2}
},
secondary:{
alignItems:"center",
justifyContent:"center",
width:48,
height:48,
borderRadius:24,
backgroundColor:"orange",
shadowColor:"orange",
},
foto:{
width:100,
height:100,
borderRadius:20,
borderColor:"orange",
borderWidth:2,
shadowOpacity:0.1,
backgroundColor:"transparent"
}
});
. Затем он экспортируется в приложение. js, которое только кодирует его в центре экрана. Не могли бы вы помочь мне?