我有一个带有 imageBackground 的视图。在此之下,我有 3 个按钮。我想要这样,当您单击其中一个按钮时,imageBackground 会发生变化。
我想每次都使用带有状态变化的开关盒,但它没有用。我有点迷路了...我发布了我的代码,如果您有任何想法,非常感谢您的帮助!
export default class Weight extends React.Component {
constructor(props) {
super(props);
this.state = {
bgWidth: "100%",
bgHeight: 0,
animalBg:'duck',
stats: {
total_weight_carried: 0,
},
};
}
setBackgroundDimensions = (real_width, real_height) => {
let final_width = real_width;
let final_height = real_height * (width * 100 / real_width) / 100;
this.setState({
bgWidth: "100%", // Force 100% for compatibility
bgHeight: final_height
});
console.log(height, real_height, (width * 100 / real_width), final_height);
};
UNSAFE_componentWillMount() {
// Image.getSize(bgStatsURL, (width, height) => {this.setBackgroundDimensions({width, height})});
this.setBackgroundDimensions(1125, 1589);
}
duck = () => {
return(
<ImageBackground
source={require('../../assets/images/stats/bg-stats-weight-duck.jpg')}
style={{ flex: 1, width: this.state.bgWidth, height: this.state.bgHeight, marginVertical: 25}}
imageStyle={{ resizeMode: "contain" }}
>
<View style={{zIndex: 1, flexDirection: "row", justifyContent: 'center', marginTop: 5}}>
<Text style={styles.statText}>
<AnimateNumber
value={this.state.stats.total_weight_carried}
countBy={(this.state.stats.total_weight_carried / 50).toFixed(0)}
style={styles.statTextData}
/>{" "}
{i18n.t("stats.unit.kg")}
</Text>
</View>
<View style={[styles.row, { marginTop: 450, alignItems: 'center', justifyContent: 'center'}]}>
<Text style={styles.statText}>x ducks</Text>
</View>
</ImageBackground>
)
}
elephant = () => {
return(
<ImageBackground
source={require('../../assets/images/stats/bg-stats-weight-elephant.jpg')}
style={{ flex: 1, width: this.state.bgWidth, height: this.state.bgHeight, marginVertical: 25}}
imageStyle={{ resizeMode: "contain" }}
>
<View style={{zIndex: 1, flexDirection: "row", justifyContent: 'center', marginTop: 5}}>
<Text style={styles.statText}>
<AnimateNumber
value={this.state.stats.total_weight_carried}
countBy={(this.state.stats.total_weight_carried / 50).toFixed(0)}
style={styles.statTextData}
/>{" "}
{i18n.t("stats.unit.kg")}
</Text>
</View>
<View style={[styles.row, { marginTop: 450, alignItems: 'center', justifyContent: 'center'}]}>
<Text style={styles.statText}>x ducks</Text>
</View>
</ImageBackground>
)
}
trex = () => {
return(
<ImageBackground
source={require('../../assets/images/stats/bg-stats-weight-trex.jpg')}
style={{ flex: 1, width: this.state.bgWidth, height: this.state.bgHeight, marginVertical: 25}}
imageStyle={{ resizeMode: "contain" }}
>
<View style={{zIndex: 1, flexDirection: "row", justifyContent: 'center', marginTop: 5}}>
<Text style={styles.statText}>
<AnimateNumber
value={this.state.stats.total_weight_carried}
countBy={(this.state.stats.total_weight_carried / 50).toFixed(0)}
style={styles.statTextData}
/>{" "}
{i18n.t("stats.unit.kg")}
</Text>
</View>
<View style={[styles.row, { marginTop: 450, alignItems: 'center', justifyContent: 'center'}]}>
<Text style={styles.statText}>x ducks</Text>
</View>
</ImageBackground>
)
};
choiceAction = (val) => {
switch(val) {
case "duck":
this.duck();
break;
case "elephant":
this.elephant();
break;
case "trex":
this.trex();
break;
default:
this.duck();
}
};
render() {
return (
<ScrollView style={styles.containerScrollNoMargins}>
<ImageBackground
source={require("../../assets/images/background-stats.jpg")}
style={{ flex: 1 }}
imageStyle={{ resizeMode: "stretch" }}
>
<SafeAreaView>
<View style={styles.rankingContainer}>
<Image
source={require("../../assets/images/cadran.png")}
style={styles.btnRanking}
/>
<View style={[styles.row, { marginTop: 28, marginLeft: 55}]}>
<Text style={styles.statText}>{i18n.t("stats.action.weight")}</Text>
</View>
<Text
style={[styles.textimg, styles.measure]}
onLayout={this.handleLayout}
>
0
</Text>
<Image
source={require("../../assets/images/btn-header-background.png")}
style={styles.cadran}
/>
</View>
</SafeAreaView>
{this.choiceAction()}
<View style={{flexDirection:'row', alignItems: 'center', justifyContent: 'space-around'}}>
<TouchableOpacity
style={styles.zoom}
onPress={() => this.props.navigation.navigate("FlightsList")}
>
<Image
source={require("../../assets/images/stats/btn-canard.png")}
style={styles.weightImg}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.zoom}
onPress={this.choiceAction('duck')}
>
<Image
source={require("../../assets/images/stats/btn-elephant.png")}
style={styles.weightImg}
/>
</TouchableOpacity>
<TouchableOpacity
style={styles.zoom}
onPress={this.choiceAction('elephant')}
>
<Image
source={require("../../assets/images/stats/btn-trex.png")}
style={styles.weightImg}
/>
</TouchableOpacity>
</View>
<View style={styles.subContainer}>
<TouchableOpacity
style={styles.touchable2}
onPress={this.choiceAction('trex')}
>
<View style={styles.view2}>
<Text style={styles.textimg2}>
{i18n.t("signup.action.back")}
</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg2}
/>
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
);
}
}