0

嗨，我是 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"
}
});

然后将其导出到 App.js，仅在屏幕中央对其进行编码。请你帮助我好吗？

4

1 回答 1

0

您只需要style={{position:"absolute"}}在第二个视图中添加一个作为回报

整个代码是

import React from "react";
import {View, StyleSheet, TouchableHighlight, Animated, Image} from "react-native";
import {Feather} from "@expo/vector-icons";

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 style={{position:"absolute"}}>
        <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/main.jpg')} />
                </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"
}
});

在此处输入图像描述

当你按下它

在此处输入图像描述

希望这可以帮助！

于 2020-04-07T16:15:02.380 回答