react-native - 隐藏图像后面的按钮
问题描述
嗨,我是 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,仅在屏幕中央对其进行编码。请你帮助我好吗?
解决方案
您只需要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"
}
});
当你按下它
希望这可以帮助!
推荐阅读
- api - Azure DevOps 构建定义和管道之间有什么区别和关系?
- python - 配置:错误:找不到 Boost 标头版本 >= 1.48.0
- python - 在 y = x 之后,x 的值应该不会改变,但是为什么 x 在这个脚本中改变了呢?
- python - groupby 过滤每月余额均为负数的帐户
- android - Paging 3 - 如何在 PagingDataAdapter 完成刷新并且 DiffUtil 完成差异后滚动到 RecyclerView 的顶部?
- swagger-ui - .NET-5 向未经授权的用户隐藏招摇的端点
- sql - SQL Developer:查询结果的导出不保留data_type
- python - Text Hopping python 问题——为什么我的代码会失效?
- google-bigquery - Cloud Storage 中未显示 Google Play 存储桶
- python - 斯皮比。无法编译过滤器表达式。苹果系统