The sprites for the rocks have no logic on them and are basically <Image /> components positioned and sized by the parent component. This is the code for <RockUp />:
/*** src/components/RockUp.js ***/
import React, { Component } from “react";
import { Image } from “react-native";
import { W, H } from “../constants";
export default class RockUp extends Component {
render() {
return (
<Image
resizeMode="stretch"
source={require(“../../images/rock-down.png")}
style={{
position: “absolute",
left: this.props.x,
top: this.props.y,
width: this.props.width * W,
height: this.props.height * H
}}
/>
);
}
}The height and the width will be calculated by the following formulae: this.props.width * W and this.props.height * H. This will size the rock relative to the device's screen and the provided height and width.
The code for <RockDown /> is quite similar:
/*** src/components/RockDown.js ***/
import React, { Component } from “react";
import { Image } from “react-native";
import { W, H } from “../constants";
export default class RockDown extends Component {
render() {
return (
<Image
resizeMode="stretch"
source={require(“../../images/rock-up.png")}
style={{
position: “absolute",
left: this.props.x,
top: this.props.y,
width: this.props.width * W,
height: this.props.height * H
}}
/>
);
}
}..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.