用React Native制作一个简单的游戏引擎
简介
今天我们将学习如何使用React Native制作一个游戏。因为我们使用的是React Native，这个游戏将是跨平台的，这意味着你可以在Android、iOS和网络上玩同一个游戏。然而，今天我们将只关注移动设备。所以我们开始吧。
开始吧
要制作任何游戏，我们需要一个循环，在我们玩的时候更新我们的游戏。这个循环被优化以顺利运行游戏，为此我们将使用 React Native游戏引擎 。
首先让我们用以下命令创建一个新的React Native应用。
npx react-native init ReactNativeGame
创建项目后，我们需要添加一个依赖项，以便添加游戏引擎。
npm i -S react-native-game-engine
这个命令将把React Native游戏引擎添加到我们的项目中。
那么，我们要做一个什么样的游戏呢？为了简单起见，让我们做一个蛇的游戏，它可以吃食物的碎片并增长身长。
对React Native游戏引擎的简单介绍
React Native Game Engine是一个轻量级的游戏引擎。它包括一个组件，允许我们将对象的数组添加为实体，这样我们就可以对它们进行操作。为了编写我们的游戏逻辑，我们使用了一个系统道具阵列，它允许我们操纵实体（游戏对象），检测触摸，以及许多其他令人敬畏的细节，帮助我们制作一个简单的、功能性的游戏。
让我们在React Native中建立一个蛇形游戏
要制作一个游戏，我们需要一个画布或容器，我们将在其中添加游戏对象。要制作一个画布，我们只需添加一个带有风格的视图组件，像这样。
// App.js
<View style={styles.canvas}>
</View>
我们可以像这样添加我们的样式。
const styles = StyleSheet.create({
canvas: {
flex: 1,
backgroundColor: "#000000",
alignItems: "center",
justifyContent: "center",
}
});
在画布中，我们将使用 GameEngine 组件和一些来自React Native Game Engine的样式。
import { GameEngine } from "react-native-game-engine";
import React, { useRef } from "react";
import Constants from "./Constants";
export default function App() {
const BoardSize = Constants.GRID_SIZE * Constants.CELL_SIZE;
const engine = useRef(null);
return (
<View style={styles.canvas}>
<GameEngine
ref={engine}
style={{
width: BoardSize,
height: BoardSize,
flex: null,
backgroundColor: "white",
}}
/>
</View>
);
我们还使用 useRef() React Hook为游戏引擎添加了一个ref，以便日后使用。
我们还在项目的根部创建了一个 Constants.js 文件来存储我们的常量值。
// Constants.js
import { Dimensions } from "react-native";
export default {
MAX_WIDTH: Dimensions.get("screen").width,
MAX_HEIGHT: Dimensions.get("screen").height,
GRID_SIZE: 15,
CELL_SIZE: 20
};
你会注意到我们正在做一个15乘15的网格，我们的蛇将在那里移动。
这时我们的游戏引擎已经设置好了，以显示蛇和它的食物。我们需要将实体和道具添加到 GameEngine ，但在此之前，我们需要创建一个蛇和食物的组件，在设备上渲染。
创建游戏实体
让我们首先制作蛇。蛇分为两部分，头部和身体（或尾巴）。现在我们将制作蛇的头部，我们将在本教程的后面添加蛇的尾巴。
为了制作蛇的头部，我们将在组件文件夹中制作一个 Head 组件。
正如你所看到的，我们有三个组件： Head ， Food ，和 Tail 。我们将在本教程中逐一查看这些文件的内容。
在 Head 组件中，我们将创建一个带有一些样式的视图。
import React from "react";
import { View } from "react-native";
export default function Head({ position, size }) {
return (
<View
style={{
width: size,
height: size,
backgroundColor: "red",
position: "absolute",
left: position[0] * size,
top: position[1] * size,
}}
></View>
);
}
我们将传递一些道具来设置头部的大小和位置。
我们使用 position: "absolute" 属性来轻松移动头部。
这将呈现一个正方形，我们不打算使用更复杂的东西；一个正方形或长方形的形状代表蛇的身体，一个圆形的形状代表食物。
现在让我们将这条蛇的头部添加到 GameEngine 。
要添加任何实体，我们需要在 GameEngine 中的 entities 道具中传递一个对象。
//App.js
import Head from "./components/Head";
<GameEngine
ref={engine}
style={{
width: BoardSize,
height: BoardSize,
flex: null,
backgroundColor: "white",
}}
entities={{
head: {
position: [0, 0],
size: Constants.CELL_SIZE,
updateFrequency: 10,
nextMove: 10,
xspeed: 0,
yspeed: 0,
renderer: <Head />,
}
}}
/>
我们在 entities 道具中传递了一个对象，其关键是头。这些是它定义的属性。
position是一组坐标，用于放置蛇头。size是设置蛇头大小的值。xspeed和yspeed是决定蛇的运动和方向的值，可以是1、0或-1。注意，当 xspeed 被设置为1或-1时，那么 yspeed 的值必须为0，反之亦然- 最后，
renderer，负责渲染该组件 updateFrequency和nextMove将在后面讨论。
在添加完 Head 组件后，我们也来添加其他组件。
// commponets/Food/index.js
import React from "react";
import { View } from "react-native";
export default function Food({ position, size }) {
return (
<View
style={{
width: size,
height: size,
backgroundColor: "green",
position: "absolute",
left: position[0] * size,
top: position[1] * size,
borderRadius: 50
}}
></View>
);
}
Food 组件与 Head 组件类似，但我们改变了背景颜色和边框半径，使其成为一个圆形。
现在创建一个 Tail 组件。这个可能很棘手。
// components/Tail/index.js
import React from "react";
import { View } from "react-native";
import Constants from "../../Constants";
export default function Tail({ elements, position, size }) {
const tailList = elements.map((el, idx) => (
<View
key={idx}
style={{
width: size,
height: size,
position: "absolute",
left: el[0] * size,
top: el[1] * size,
backgroundColor: "red",
}}
/>
));
return (
<View
style={{
width: Constants.GRID_SIZE * size,
height: Constants.GRID_SIZE * size,
}}
>
{tailList}
</View>
);
}
当蛇吃了食物后，我们将在蛇身中添加一个元素，这样我们的蛇就会成长。这些元素将传入 Tail 组件，这将表明它必须变大。
我们将循环浏览所有的元素来创建整个蛇身，附加上它，然后渲染。
在制作完所有需要的组件后，让我们把这两个组件作为 GameEngine 。
// App.js
import Food from "./components/Food";
import Tail from "./components/Tail";
// App.js
const randomPositions = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
// App.js
<GameEngine
ref={engine}
style={{
width: BoardSize,
height: BoardSize,
flex: null,
backgroundColor: "white",
}}
entities={{
head: {
position: [0, 0],
size: Constants.CELL_SIZE,
updateFrequency: 10,
nextMove: 10,
xspeed: 0,
yspeed: 0,
renderer: <Head />,
},
food: {
position: [
randomPositions(0, Constants.GRID_SIZE - 1),
randomPositions(0, Constants.GRID_SIZE - 1),
],
size: Constants.CELL_SIZE,
renderer: <Food />,
},
tail: {
size: Constants.CELL_SIZE,
elements: [],
renderer: <Tail />,
},
}}
/>
为了保证食物位置的随机性，我们做了一个带有最小和最大参数的 randomPositions 函数。
在 tail ，我们在初始状态下添加了一个空数组，所以当蛇吃到食物时，它将在 elements: 空间中存储每个尾巴的长度。
在这一点上，我们已经成功创建了我们的游戏组件。现在是在游戏循环中添加游戏逻辑的时候了。
游戏逻辑
为了使游戏循环， GameEngine 组件有一个叫 systems 的道具，它接受一个数组的函数。
为了保持一切结构化，我正在创建一个名为 systems 的文件夹，并插入一个名为 GameLoop.js 的文件。
在这个文件中，我们正在导出一个带有某些参数的函数。
// GameLoop.js
export default function (entities, { events, dispatch }) {
...
return entities;
}
第一个参数是 entities ，它包含了我们传递给 GameEngine 组件的所有实体，所以我们可以操作它们。另一个参数是一个带有属性的对象，即 events 和 dispatch 。
移动蛇头
让我们编写代码，将蛇头向正确的方向移动。
在 GameLoop.js 函数中，我们将更新头部的位置，因为这个函数在每一帧都会被调用。
// GameLoop.js
export default function (entities, { events, dispatch }) {
const head = entities.head;
head.position[0] += head.xspeed;
head.position[1] += head.yspeed;
}
我们使用 entities 参数访问头部，在每一帧中我们都要更新蛇头的位置。
如果你现在玩游戏，什么也不会发生，因为我们把 xspeed 和 yspeed 设置为0。如果你把 xspeed 或 yspeed 设置为1，蛇的头部会移动得很快。
为了减慢蛇的速度，我们将像这样使用 nextMove 和 updateFrequency 的值。
const head = entities.head;
head.nextMove -= 1;
if (head.nextMove === 0) {
head.nextMove = head.updateFrequency;
head.position[0] += head.xspeed;
head.position[1] += head.yspeed;
}
我们通过在每一帧中减去1来更新 nextMove 的值为0。当值为0时， if 条件被设置为 true ， nextMove 值被更新回初始值，从而移动蛇的头部。
现在，蛇的速度应该比以前慢了。
"游戏结束！"条件
在这一点上，我们还没有添加 "游戏结束！"条件。第一个 "游戏结束！"条件是当蛇碰到墙时，游戏停止运行，并向用户显示一条信息，表明游戏已经结束。
为了添加这个条件，我们使用这段代码。
if (head.nextMove === 0) {
head.nextMove = head.updateFrequency;
if (
head.position[0] + head.xspeed < 0 ||
head.position[0] + head.xspeed >= Constants.GRID_SIZE ||
head.position[1] + head.yspeed < 0 ||
head.position[1] + head.yspeed >= Constants.GRID_SIZE
) {
dispatch("game-over");
} else {
head.position[0] += head.xspeed;
head.position[1] += head.yspeed;
}
第二个 if 条件是检查蛇头是否触及墙壁。如果该条件为真，那么我们将使用 dispatch 函数来发送一个 "game-over" 事件。
通过 else ，我们正在更新蛇的头部位置。
现在让我们添加 "游戏结束！"的功能。
每当我们派发一个 "game-over" 事件时，我们将停止游戏，并显示一个警告："游戏结束！"让我们来实现它。
为了监听 "game-over" 事件，我们需要将 onEvent 道具传递给 GameEngine 组件。为了停止游戏，我们需要添加一个 running 道具并传入 useState 。
我们的 GameEngine 应该看起来像这样。
// App.js
import React, { useRef, useState } from "react";
import GameLoop from "./systems/GameLoop";
....
....
const [isGameRunning, setIsGameRunning] = useState(true);
....
....
<GameEngine
ref={engine}
style={{
width: BoardSize,
height: BoardSize,
flex: null,
backgroundColor: "white",
}}
entities={{
head: {
position: [0, 0],
size: Constants.CELL_SIZE,
updateFrequency: 10,
nextMove: 10,
xspeed: 0,
yspeed: 0,
renderer: <Head />,
},
food: {
position: [
randomPositions(0, Constants.GRID_SIZE - 1),
randomPositions(0, Constants.GRID_SIZE - 1),
],
size: Constants.CELL_SIZE,
renderer: <Food />,
},
tail: {
size: Constants.CELL_SIZE,
elements: [],
renderer: <Tail />,
},
}}
systems={[GameLoop]}
running={isGameRunning}
onEvent={(e) => {
switch (e) {
case "game-over":
alert("Game over!");
setIsGameRunning(false);
return;
}
}}
/>
在 GameEngine 中，我们已经添加了 systems 道具，并通过我们的 GameLoop 函数传入了一个数组，同时还有一个 running 道具和一个 isGameRunning 状态。最后，我们添加了 onEvent 道具，它接受一个带有事件参数的函数，这样我们就可以监听我们的事件。
在这种情况下，我们在switch语句中监听 "game-over" 事件，所以当我们收到该事件时，我们显示 "Game over!" 警报，并将 isGameRunning 状态设置为 false ，以停止游戏。
食用食物
我们已经写好了 "游戏结束！"的逻辑，现在让我们来写一下让蛇吃食物的逻辑。
当蛇吃了食物后，食物的位置应该随机变化。
打开 GameLoop.js ，写下以下代码。
// GameLoop.js
const randomPositions = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
export default function (entities, { events, dispatch }) {
const head = entities.head;
const food = entities.food;
....
....
....
if (
head.position[0] + head.xspeed < 0 ||
head.position[0] + head.xspeed >= Constants.GRID_SIZE ||
head.position[1] + head.yspeed < 0 ||
head.position[1] + head.yspeed >= Constants.GRID_SIZE
) {
dispatch("game-over");
} else {
head.position[0] += head.xspeed;
head.position[1] += head.yspeed;
if (
head.position[0] == food.position[0] &&
head.position[1] == food.position[1]
) {
food.position = [
randomPositions(0, Constants.GRID_SIZE - 1),
randomPositions(0, Constants.GRID_SIZE - 1),
];
}
}
我们添加了一个 if ，以检查蛇头和食物的位置是否相同（这将表明蛇已经 "吃 "了食物）。然后，我们使用 randomPositions 函数更新食物的位置，正如我们在上面的 App.js 。请注意，我们是通过 entities 参数来访问食物的。
控制蛇
现在让我们来添加蛇的控制。我们将使用按钮来控制蛇的移动位置。
要做到这一点，我们需要在画布下面的屏幕上添加按钮。
// App.js
import React, { useRef, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { GameEngine } from "react-native-game-engine";
import { TouchableOpacity } from "react-native-gesture-handler";
import Food from "./components/Food";
import Head from "./components/Head";
import Tail from "./components/Tail";
import Constants from "./Constants";
import GameLoop from "./systems/GameLoop";
export default function App() {
const BoardSize = Constants.GRID_SIZE * Constants.CELL_SIZE;
const engine = useRef(null);
const [isGameRunning, setIsGameRunning] = useState(true);
const randomPositions = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
const resetGame = () => {
engine.current.swap({
head: {
position: [0, 0],
size: Constants.CELL_SIZE,
updateFrequency: 10,
nextMove: 10,
xspeed: 0,
yspeed: 0,
renderer: <Head />,
},
food: {
position: [
randomPositions(0, Constants.GRID_SIZE - 1),
randomPositions(0, Constants.GRID_SIZE - 1),
],
size: Constants.CELL_SIZE,
updateFrequency: 10,
nextMove: 10,
xspeed: 0,
yspeed: 0,
renderer: <Food />,
},
tail: {
size: Constants.CELL_SIZE,
elements: [],
renderer: <Tail />,
},
});
setIsGameRunning(true);
};
return (
<View style={styles.canvas}>
<GameEngine
ref={engine}
style={{
width: BoardSize,
height: BoardSize,
flex: null,
backgroundColor: "white",
}}
entities={{
head: {
position: [0, 0],
size: Constants.CELL_SIZE,
updateFrequency: 10,
nextMove: 10,
xspeed: 0,
yspeed: 0,
renderer: <Head />,
},
food: {
position: [
randomPositions(0, Constants.GRID_SIZE - 1),
randomPositions(0, Constants.GRID_SIZE - 1),
],
size: Constants.CELL_SIZE,
renderer: <Food />,
},
tail: {
size: Constants.CELL_SIZE,
elements: [],
renderer: <Tail />,
},
}}
systems={[GameLoop]}
running={isGameRunning}
onEvent={(e) => {
switch (e) {
case "game-over":
alert("Game over!");
setIsGameRunning(false);
return;
}
}}
/>
<View style={styles.controlContainer}>
<View style={styles.controllerRow}>
<TouchableOpacity onPress={() => engine.current.dispatch("move-up")}>
<View style={styles.controlBtn} />
</TouchableOpacity>
</View>
<View style={styles.controllerRow}>
<TouchableOpacity
onPress={() => engine.current.dispatch("move-left")}
>
<View style={styles.controlBtn} />
</TouchableOpacity>
<View style={[styles.controlBtn, { backgroundColor: null }]} />
<TouchableOpacity
onPress={() => engine.current.dispatch("move-right")}
>
<View style={styles.controlBtn} />
</TouchableOpacity>
</View>
<View style={styles.controllerRow}>
<TouchableOpacity
onPress={() => engine.current.dispatch("move-down")}
>
<View style={styles.controlBtn} />
</TouchableOpacity>
</View>
</View>
{!isGameRunning && (
<TouchableOpacity onPress={resetGame}>
<Text
style={{
color: "white",
marginTop: 15,
fontSize: 22,
padding: 10,
backgroundColor: "grey",
borderRadius: 10
}}
>
Start New Game
</Text>
</TouchableOpacity>
)}
</View>
);
}
const styles = StyleSheet.create({
canvas: {
flex: 1,
backgroundColor: "#000000",
alignItems: "center",
justifyContent: "center",
},
controlContainer: {
marginTop: 10,
},
controllerRow: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
},
controlBtn: {
backgroundColor: "yellow",
width: 100,
height: 100,
},
});
除了控制之外，我们还添加了一个按钮，以便在前一个游戏结束时开始一个新的游戏。这个按钮只在游戏没有运行时出现。在点击该按钮时，我们通过使用游戏引擎的 swap 函数来重置游戏，传入实体的初始对象，并更新游戏的运行状态。
现在说说控制。我们已经添加了可触摸物体，当按下这些物体时，就会派发将在游戏循环中处理的事件。
// GameLoop.js
....
....
export default function (entities, { events, dispatch }) {
const head = entities.head;
const food = entities.food;
if (events.length) {
events.forEach((e) => {
switch (e) {
case "move-up":
if (head.yspeed === 1) return;
head.yspeed = -1;
head.xspeed = 0;
return;
case "move-right":
if (head.xspeed === -1) return;
head.xspeed = 1;
head.yspeed = 0;
return;
case "move-down":
if (head.yspeed === -1) return;
head.yspeed = 1;
head.xspeed = 0;
return;
case "move-left":
if (head.xspeed === 1) return;
head.xspeed = -1;
head.yspeed = 0;
return;
}
});
}
....
....
});
在上面的代码中，我们添加了一个 switch 语句来识别事件并更新蛇的方向。
还在听我说吗？很好!唯一剩下的就是尾巴了。
尾巴功能
当蛇吃了食物后，我们希望它的尾巴能长出来。我们还想在蛇咬到自己的尾巴或身体时发出一个 "游戏结束！"的事件。
让我们来添加尾巴逻辑。
// GameLoop.js
const tail = entities.tail;
....
....
....
else {
tail.elements = [[head.position[0], head.position[1]], ...tail.elements];
tail.elements.pop();
head.position[0] += head.xspeed;
head.position[1] += head.yspeed;
tail.elements.forEach((el, idx) => {
if (
head.position[0] === el[0] &&
head.position[1] === el[1]
)
dispatch("game-over");
});
if (
head.position[0] == food.position[0] &&
head.position[1] == food.position[1]
) {
tail.elements = [
[head.position[0], head.position[1]],
...tail.elements,
];
food.position = [
randomPositions(0, Constants.GRID_SIZE - 1),
randomPositions(0, Constants.GRID_SIZE - 1),
];
}
}
为了使尾巴跟随蛇的头部，我们要更新尾巴的元素。我们通过将头部的位置添加到元素数组的开头，然后删除尾巴元素数组上的最后一个元素来实现这一目的。
在这之后，我们写一个条件，如果蛇咬了自己的身体，我们就分派 "game-over" 事件。
最后，每当蛇吃了食物，我们就用蛇头的当前位置来追加蛇尾的元素，以增加蛇尾的长度。
下面是 GameLoop.js 的完整代码。
// GameLoop.js
import Constants from "../Constants";
const randomPositions = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
export default function (entities, { events, dispatch }) {
const head = entities.head;
const food = entities.food;
const tail = entities.tail;
if (events.length) {
events.forEach((e) => {
switch (e) {
case "move-up":
if (head.yspeed === 1) return;
head.yspeed = -1;
head.xspeed = 0;
return;
case "move-right":
if (head.xspeed === -1) return;
head.xspeed = 1;
head.yspeed = 0;
// ToastAndroid.show("move right", ToastAndroid.SHORT);
return;
case "move-down":
if (head.yspeed === -1) return;
// ToastAndroid.show("move down", ToastAndroid.SHORT);
head.yspeed = 1;
head.xspeed = 0;
return;
case "move-left":
if (head.xspeed === 1) return;
head.xspeed = -1;
head.yspeed = 0;
// ToastAndroid.show("move left", ToastAndroid.SHORT);
return;
}
});
}
head.nextMove -= 1;
if (head.nextMove === 0) {
head.nextMove = head.updateFrequency;
if (
head.position[0] + head.xspeed < 0 ||
head.position[0] + head.xspeed >= Constants.GRID_SIZE ||
head.position[1] + head.yspeed < 0 ||
head.position[1] + head.yspeed >= Constants.GRID_SIZE
) {
dispatch("game-over");
} else {
tail.elements = [[head.position[0], head.position[1]], ...tail.elements];
tail.elements.pop();
head.position[0] += head.xspeed;
head.position[1] += head.yspeed;
tail.elements.forEach((el, idx) => {
console.log({ el, idx });
if (
head.position[0] === el[0] &&
head.position[1] === el[1]
)
dispatch("game-over");
});
if (
head.position[0] == food.position[0] &&
head.position[1] == food.position[1]
) {
tail.elements = [
[head.position[0], head.position[1]],
...tail.elements,
];
food.position = [
randomPositions(0, Constants.GRID_SIZE - 1),
randomPositions(0, Constants.GRID_SIZE - 1),
];
}
}
}
return entities;
}
结语
现在你的第一个React Native游戏已经完成了你可以在自己的设备上运行这个游戏来玩。我希望你能学到一些新的东西，也希望你能与你的朋友分享。
谢谢你的阅读，祝你有个愉快的一天。
The post How to build a simple game in React Nativeappeared first onLogRocket Blog.
以上就是用React Native构建一个简单的游戏的详细内容，更多关于React Native游戏的资料请关注我们其它相关文章！
相关推荐
-
ReactNative 之FlatList使用及踩坑封装总结
在RN中FlatList是一个高性能的列表组件,它是ListView组件的升级版,性能方面有了很大的提升,当然也就建议大家在实现列表功能时使用FlatList,尽量不要使用ListView,更不要使用ScrollView.既然说到FlatList,那就先温习一下它支持的功能. 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件. 支持单独的头部组件. 支持单独的尾部组件. 支持自定义行间分隔线. 支持下拉刷新. 支持上拉加载. 支持跳转到指定行(ScrollToIndex). 今
-
React-native桥接Android原生开发详解
在开发RN的漫漫长河中,早晚有那么一天要接触到安卓的原生开发,笔者来介绍一下其中的酸甜苦辣.对于一个不懂android的小白来说,刚开始有点难,不过都是万事开头难.语言是想通的,原理也是大径若一. 开发过程中是要集成高德的导航功能,没有找到好的轮子的,只要写原生代码,然后在用JS去调用原生的导航模块. 首先注册模块 其意义在与将类注册到RN中,才能用JS去调用 public class AnExampleReactPackage implements ReactPackage { @Overri
-
React Native react-navigation 导航使用详解
一.开源库介绍 今年1月份,新开源的react-natvigation库备受瞩目.在短短不到3个月的时间,github上星数已达4000+.Fb推荐使用库,并且在React Native当前最新版本0.44中将Navigator删除.react-navigation据称有原生般的性能体验效果.可能会成为未来React Native导航组件的主流军.本篇内容基于[ ^1.0.0-beta.9 ]版本来介绍关于该库的使用和实战技巧.可以看到,虽然是beta版本,不过基本稳定,大家可放心在项目中使用.
-
react native实现监控手势上下拉动效果
react native实现监控手势进行上下拉动效果,详细核心代码如下: 代码: import {PanResponder} from 'react-native'; var Dimensions = require('Dimensions'); const deviceHeight = Dimensions.get("window").height; const deviceWidth = Dimensions.get("window").width; class
-
VSCode搭建React Native环境
安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行react-native 此时可能出现 如下界面,这是因为没有配置运行文件 在debug 页面,点击如下位置,添加configurations 然后点击添加配置,选择debug android 此时点击F5,则可出现如下界面,表示 react-native以运行起来 此时发现断点无法生效,且log的
-
ReactNative之FlatList的具体使用方法
之前使用的组件是ListView,当时要添加一个下拉刷新,上拉加载的功能,所以对ListView做了一些封装,但是后来看官方文档,不建议再使用ListView,因为效率问题,做过Android的朋友都知道,Android的ListView如果不自己处理一下,也是有效率问题的.所以官方又推出了FlatList,而且自带上拉下拉的功能. 功能简介 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件. 支持单独的头部组件. 支持单独的尾部组件. 支持自定义行间分隔线. 支持下拉刷新.
-
详解react-native WebView 返回处理(非回调方法可解决)
1.前言 项目中有些页面内容是变更比较频繁的,这些页面我们会考虑用 网页 来解决. 在RN项目中提供一个公用的Web页,如果是网页内容,就跳转到这个界面展示. 此时会有一个问题是,网页会有一级页面,二级页面,这就会设计到导航栏返回键的处理(以及在Android上返回键的处理). 这个问题,在RN官网就可找到解决方式.就是用 onNavigationStateChange 这个回调方法记录当前的导航状态,从而判断是返回上一级页面还是退出这个网页,回到App的其他界面. 但是,当网页的实现是Reac
-
浅谈React Native Flexbox布局(小结)
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 基本概念 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目". 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结
-
解决react-native软键盘弹出挡住输入框的问题
这是效果: 代码: import React, {Component} from 'react'; import { View, Text, Button, StyleSheet, TextInput, ScrollView, KeyboardAvoidingView, Dimensions } from 'react-native'; import { StackActions, NavigationActions, withNavigation } from 'react-navigatio
-
用React Native制作一个简单的游戏引擎
简介 今天我们将学习如何使用React Native制作一个游戏.因为我们使用的是React Native,这个游戏将是跨平台的,这意味着你可以在Android.iOS和网络上玩同一个游戏.然而,今天我们将只关注移动设备.所以我们开始吧. 开始吧 要制作任何游戏,我们需要一个循环,在我们玩的时候更新我们的游戏.这个循环被优化以顺利运行游戏,为此我们将使用 React Native游戏引擎 . 首先让我们用以下命令创建一个新的React Native应用. npx react-native ini
-
探索Emberjs制作一个简单的Todo应用
目标 使用Emberjs制作一个简单的Todo应用,实现这样一个效果:通过在文本框输入文本,创建一条代办事项,代办事项可以选择优先级,完成的事项可以删除. 准备 完成这个应用,需要做点准备: 1.创建一个html页面,暂时不管样式: 2.脚本:emberjs,handlebars.jQuery.这三个脚本可以从网上获得,我们将把他们加入到head标签里去. 制作 创建页面,加入脚本,就可以开始制作应用.html代码如下: 复制代码 代码如下: <!doctype html> <html&
-
PHP开发制作一个简单的活动日程表Calendar
材料取之深入PHP与JQuery开发,这本书实际上就是讲述一个活动日程表. 此文章适合从其它语言(如java,C++,python等)转到php,没有系统学习php,或者是php初学者,已经对程序有较深理解的朋友 以上为文件目录结构,public为程序根目录,目的是为了安全方面的考虑,把核心程序放在外界访问不到的地方. 本地的演示地址为:http://localhost/index.php 首先是数据库的脚本: /* Navicat MySQL Data Transfer Source Serv
-
python制作一个简单的gui 数据库查询界面
一.准备工作: 1.安装mysql3.7,创建一个test数据库,创建student表,创建列:(列名看代码),创建几条数据 (以上工作直接用navicat for mysql工具完成) 二.代码: import sys import tkinter as tk import mysql.connector as sql #--------------------查询函数--------------------------- def sql_connect(): listbox_show.del
-
基于JS制作一个简单的网页版地图
目录 前言 一.申请地图的AK密钥 二.主要代码分析 三.全部代码 四.结果展示 前言 以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜索时,或者经纬度查询城市时,该小控件也能自由地切换到目标城市. 一.申请地图的AK密钥 1.首先找到一个地图开放平台,这里以百度地图开放平台为例,步骤如下:进入百度地图开放平台,拉到最底下,进行登录注册,然后进入应用管
-
利用Python制作一个简单的天气播报系统
目录 前言 工具 天气数据来源 代码实现 总结 前言 大家好,我是辣条 相信大家都能感觉到最近天气的多变,好几次出门半路天气转变.辣条也深受其扰,直接给我整感冒,就差被隔离起来了,既然天气我没法做主,那不如用python整个天气爬虫来获取天气情况.这样也好可以进行一个提前预防 工具 python3.7 pycharm pyttsx3:语音播报库 天气数据来源 找寻一个天气网站 比如说我们要查询某地的天气,在输入地名后就能看到结果. 我们可以看到网站的url会有变化: 每个城市的天气信息url就是
-
如何利用PyQt5制作一个简单的登录界面
目录 环境配置 额外工具配置 生成UI界面 总结 环境配置 新建python虚拟环境并激活 conda create -n pyqt python=3.8 conda activate py36 安装pyqt5 pip install pyqt5 安装pyqt5-tools pip install pyqt5-tools 在PyCharm中新建一个qtdemo工程,并使用这个新建的python虚拟环境作为工程环境 额外工具配置 依次点击File---Settings---Tools---Exte
-
基于React Context实现一个简单的状态管理的示例代码
目录 前言 封装一个父组件用来包裹其他子组件 子组件如何获取数据呢 class Component 方式 context.Consumer useContext 总结 参考 前言 在大多数情况下,我们开发项目都需要一个状态管理,方便我们在全局共享状态库,在React生态里比较流行的几个库 redux.mobx.recoil 但是对于小项目,我们完全可以自己封装一个状态管理,减少一个包的安装就可以减小打包以后的项目体积. 主要分两步: 封装一个顶层组件提供数据 子组件获取数据和更新数据 封装一个父
-
nodejs教程之制作一个简单的文章发布系统
前言 我们今天就来做一个简单的新闻发布系统,系统第一阶段不需要太难,主要有以下功能 ① 新闻类型管理 ② 新闻管理(具有图片上传功能) ③ 新闻浏览 功能虽然不多,但是也涵盖很多基本操作了,程序不过增删查改嘛,外加上传附件,够了.于是开始我们今天的学习吧 准备工作 根据昨天的折腾后,我们已经有了nodeJS与mongoDB环境了,现在直接新建工程文件与数据库文件即可 第一步,打开命令符切换到D盘后输入 复制代码 代码如下: D:\>express -e news 于是系统会自动开开心心构建基本环
-
pygame学习笔记（6）：完成一个简单的游戏
学了这么长时间的Pygame,一直想写个游戏实战一下.看起来很简单的游戏,写其来怎么这么难.最初想写个俄罗斯方块,想了很长时间如何实现,想来想去,也没写出来,于是干脆下载别人的代码来读.后来,要想写一个帮助记忆的挖宝箱的游戏,结果也没完成.唯一完成了就是下面这个小人接金币的游戏,超级简单,通过左右键控制小人移动去接空中下来的金币,接住金币得5分,接不住游戏结束,金币速度会随着level的关数而越来越快.完成这段代码后,我依然觉得这段代码写得很差,确实也是自己对pygame只是掌握了皮毛,对sur