React Native Game Engine Handbook 教程

React Native Game Engine Handbook 教程

react-native-game-engine-handbookA React Native app showcasing some examples using react-native-game-engine 🐒✨项目地址:https://gitcode.com/gh_mirrors/re/react-native-game-engine-handbook

1. 项目的目录结构及介绍

React Native Game Engine Handbook 项目的目录结构如下：

react-native-game-engine-handbook/
├── assets/
├── components/
├── config/
├── constants/
├── navigation/
├── screens/
├── store/
├── utils/
├── App.js
├── index.js
├── package.json
└── README.md

目录介绍

• assets/: 存放项目所需的各种静态资源，如图片、音频等。
• components/: 存放项目中使用的各种 React 组件。
• config/: 存放项目的配置文件。
• constants/: 存放项目中使用的常量。
• navigation/: 存放项目的导航配置文件。
• screens/: 存放项目的各个页面组件。
• store/: 存放项目的状态管理文件，如 Redux 相关的文件。
• utils/: 存放项目中使用的各种工具函数。
• App.js: 项目的入口文件。
• index.js: 项目的启动文件。
• package.json: 项目的依赖管理文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 index.js，其主要作用是初始化 React Native 应用并加载 App.js 文件。

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

代码解释

• import { AppRegistry } from 'react-native': 引入 React Native 的 AppRegistry 模块。
• import App from './App': 引入项目的入口文件 App.js。
• import { name as appName } from './app.json': 引入项目的名称，通常在 app.json 文件中定义。
• AppRegistry.registerComponent(appName, () => App): 注册应用组件，appName 是应用的名称，() => App 是应用的入口组件。

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和 app.json。

package.json

package.json 文件包含了项目的依赖、脚本命令和其他配置信息。

{
  "name": "react-native-game-engine-handbook",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-game-engine": "^1.0.0"
  },
  "devDependencies": {
    "eslint": "^7.0.0",
    "eslint-config-airbnb": "^18.0.0",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-jsx-a11y": "^6.0.0",
    "eslint-plugin-react": "^7.0.0",
    "eslint-plugin-react-hooks": "^4.0.0"
  }
}

配置项解释

• name: 项目的名称。
• version: 项目的版本号。
• private: 是否为私有项目。
• scripts: 定义了一些常用的脚本命令，如启动项目、运行 Android 和 iOS 应用等。
• dependencies: 项目的运行时依赖。
• devDependencies: 项目的开发时依赖。

app.json

app.json 文件包含了应用的一些基本配置信息。

{
  "name": "ReactNativeGameEngineHandbook",
  "displayName": "React Native Game Engine Handbook"
}

配置项解释

• name: 应用的内部名称。
• displayName: 应用的显示名称。

以上是 React Native Game Engine Handbook 项目的目录

react-native-game-engine-handbookA React Native app showcasing some examples using react-native-game-engine 🐒✨项目地址:https://gitcode.com/gh_mirrors/re/react-native-game-engine-handbook