本文介绍了如何将基于SpriteKit的游戏集成到React Native应用中。
背景故事
我打算在圣诞节期间创建一个简单的2D iOS游戏，以实现我长期的游戏开发梦想。 您可以在playarroe.com上找到游戏。已经使用React Native开发了Eat or Not，这是我进行移动应用程序开发的首选。 尽管RN的性能对于简单的过渡和动画来说真是棒极了，但这并不是游戏引擎。 经过研究，我选择了Apple的SpriteKit作为游戏引擎。
SpriteKit是一种图形渲染和动画基础结构，可用于为任意纹理图像（也称为精灵）设置动画。 SpriteKit提供了一个传统的渲染循环，该循环在确定帧内容和渲染帧之间交替。
设定
首先，设置React Native项目。
按照React Native文档中的超级简单说明进行操作，您应该会看到这一点。
注意：由于SpriteKit的限制，本文仅在iOS 9.0及更高版本上有效。
游戏！
为了演示的目的，我的目标是传递一个数字 通过RN应用显示，该应用将显示在SK端。 SK端的计时器将向RN发送一个随机生成的数字。 您可以将其视为从RN向游戏传递一些配置以进行引导，然后游戏将分数返回。
好的，足够多的谈话，让我们开始编码！
第1步：从ReactNative渲染SpriteKit场景
让我们创建基本屏幕以启动游戏。 这是RN 101。
index.ios.js
导出默认类RNSK扩展了组件{
构造函数（道具）{
超级（道具）;
this.state = {
lastScore：0，
};
}
开始游戏（） {
//渲染游戏画面
}
render（）{
返回（
欢迎来到React Native SpriteKit演示！
最后得分：{this.state.lastScore}
开始游戏
）;
}
}
对于您所有的JS开发人员来说，这都是复杂的部分-Swift编码！ 通过说我以前从未做过任何Swift或SpriteKit来使我变得干净。 但是，一旦您对事物有所了解，将事物连接起来实际上非常简单。 我只是关注了许多在线提供的Swift和SpriteKit之一。
首先，让我们开始在XCode中创建一个GameScene.swift 。 此场景是所有游戏逻辑所在的位置。 为了便于组织，我在XCode中创建了一个组来保存所有与游戏相关的文件。 请注意，我添加的标签在渲染时应在屏幕中央显示“ GameScene”。
现在，我们需要一个SKView 介绍我们的场景。 这将是从RN端充当控制器的视图。 我喜欢将其视为游戏之外的内容，因此我在顶层创建了GameView.swift。
是时候在本机视图和RN之间建立桥梁了。 我遵循了文档并提出了我的RCTGameManager.m
回到JS端，让我们加载这个视图，看看会发生什么
const GameView = requireNativeComponent（'RCTGame'，null）;
导出默认类RNSK扩展了组件{
构造函数（道具）{
超级（道具）;
this.state = {
lastScore：0，
inGame：否，
};
}
开始游戏（） {
//渲染游戏画面
this.setState（{
inGame：是的，
}）
}
render（）{
如果（this.state.inGame）{
返回（
<GameView
样式= {{
宽度：Dimensions.get（'window'）。width，
高度：Dimensions.get（'window'）。height，
}}
/>
）;
}
返回（
欢迎来到React Native SpriteKit演示！
最后得分：{this.state.lastScore}
开始游戏
）;
}
}
当您单击“ 开始游戏”游戏按钮时，将看到此内容。 进度，但是$ ^＆@＃是我添加的“ GameScene”标签的地方？！？!!？！？。
让我为您节省了很多时间🙂🙂因此，当您通过桥从RN渲染视图时，RN将在视图上调用init（） ，但稍后将对其设置边界。 因此，已渲染的场景实质上具有1的宽度和高度。我们需要监听边界的变化，并在场景准备好后重新渲染。 请注意我已添加到视图范围的didSet侦听器。
现在，您会看到标签！
步骤2 ：将数据从RN传递到SK
如文档中所述，让我们修改一些文件以包含将要传入的属性
返回index.ios.js
...
返回（
<GameView
输入= {this.state.input}
样式= {{
宽度：Dimensions.get（'window'）。width，
高度：Dimensions.get（'window'）。height，
}}
/>
）;
...
多田！ 单击“开始游戏”时，您应该会看到。
步骤3 ：将数据从SpriteKit传递回RN
再次，如文档中所述，我们将使用事件。
将onEnd属性添加到RCTGameManager.m和GameView
注意：为了使RCTBubblingEventBlock在Swift中可用，需要将其导入Bridging-Header.h中。
回到RN
...
onEnd（e）{
this.setState（{
lastScore：e.nativeEvent.score，
inGame：否，
}）;
}
render（）{
如果（this.state.inGame）{
返回（
<GameView
输入= {this.state.input}
onEnd = {this.onEnd.bind（this）}
样式= {{
宽度：Dimensions.get（'window'）。width，
高度：Dimensions.get（'window'）。height，
}}
/>
）;
}
...
现在，点击“开始游戏”后1秒钟，您会看到一个随机数
那是所有人！
希望本文对您有所帮助。 我故意修饰SpriteKit部件有两个原因-首先，本文并非旨在解决此问题； 其次，我仍然是Swift的超级初学者，不想分享自己的半熟知识。
该演示的所有代码都可以在以下位置找到
沙拉普巴拉姆/ RNSK
RNSK –在React Native应用程序 github.com中使用 SpriteKit
不要忘记在playarroe.com上签出游戏。
下面的反馈/评论或@sharathprabhal上的鸣叫
如果要其他人阅读，请点击“推荐”按钮。
查看其他有趣的React Native文章，网址为
React Native日志
React Native所有东西-教程，实验，技巧和窍门，snippets medium.com
