React Native教程终篇：手把手教你为iOS和Android创建原生模块

规模化构建：在 React Native 中创建原生的 Android 和 iOS 模块：把所有步骤都整合起来。

React Native 原生模块的最后一个部分创建

简化后直接翻译为：

本教程是为希望学习如何在 React Native 中使用原生模块的中级到高级移动开发者设计的。作为 React Native 或跨平台开发者，你可能不需要经常创建原生模块，但掌握这项技能是非常重要的。虽然精通 React Native 并不代表你就是中级的原生 Android 或 iOS 开发者，但了解这两个原生平台的基础知识会非常有用——这就是本教程的重点所在。

本教程是系列教程中的一部分，我们将一步步提升技能。这里有一个简短的总结。

1- React Native基础：在上一篇文章中，我们探讨了React Native的工作原理，介绍了我们将要开发的应用程序，并概述了我们接下来将要采取的步骤。作为动手实践的开始，我们也实现了在React Native中生成随机字符串的特性。

链接在这里:https://medium.com/@malikchohra/build-for-scale-create-native-android-and-ios-module-in-react-native-prepare-react-native-app-09d615ba2450

2-理解原生模块：接下来，我们介绍了原生模块的核心概念以及使用它们的不同架构方式。这一部分主要介绍了在React Native中集成原生代码的原因和方法。

这里有个链接https://medium.com/@malikchohra/build-for-scale-create-native-android-and-ios-module-in-react-native-prepare-react-native-app-09d615ba2450

3- 创建原生 iOS 小组件模块：在接下来的部分里，我们将深入探索 iOS，创建原生 iOS 小组件模块。这包括介绍了如何组织和编写原生 iOS 代码，并确保小部件与 React Native 的顺畅通信。我们采用详细的分步方法构建一个可以与 React Native 应用程序无缝对接的工作组件。

这里有个链接https://medium.com/@malikchohra/create-native-android-and-ios-module-in-react-native-use-widget-in-native-ios-24e227050654

4- 为Android设置：我们在这个过程中为Android做了相应的调整，处理了Android原生环境的具体细节，并展示了如何设置一个能够与React Native无缝集成的模块。这包括探索Android特有的配置、架构以及通信方式。

链接地址：https://medium.com/@malikchohra/create-native-android-and-ios-module-in-react-native-use-widget-in-native-android-6e2f4a09d263（如何在React Native中创建原生Android和iOS模块并使用小部件）

最终部件

在这一节里，我将向你介绍一个使用 TypeScript 的 React Native 组件，该组件可以与 iOS 和 Android 的原生模块通信。我还分享了 GitHub 上的项目，你可以查看完整的代码，尝试运行，并看看所有东西是如何拼接起来的。

本教程充满了大量信息，帮助你深入了解 React Native 中的 native modules。学完这个教程后，你将能熟练地创建与 React Native 互动的原生组件——这对于构建跨平台应用来说非常有用。

    export const MotivationalWidget: React.FC = () => {  
      const { currentPhrase, selectRandomPhrase } = useRandomPhrase();  
      return (  
        <View style={styles.container}>  
          <Text style={styles.phrase}>{currentPhrase}</Text>  
          <TouchableOpacity style={styles.button} onPress={selectRandomPhrase}>  
            <Text style={styles.buttonText}>新的动力</Text>  
          </TouchableOpacity>  
          {Platform.OS === 'android' || Platform.OS === 'ios' && (  
            <Text style={styles.widgetInfo}>  
              这句话也会显示在主屏幕的小部件上哦！  
            </Text>  
          )}  
        </View>  
      );  
    };

GitHub 的开源项目，适用于原生 Android 和 iOS 的 React Native 项目。

https://github.com/chohra-med/rnWidget GitHub 仓库链接

不要忘了给项目点个星哦，如果有问题，有事直接找我。

通过这三篇文章，我们一起探索了React Native中原生模块的世界。我们从React Native的工作原理概述开始，通过实现一个简单的功能，为理解React Native应用奠定了基础。接着，我们深入了解了原生模块的核心概念，探讨了架构选择，并学习了如何使用原生代码来扩展React Native应用程序的功能。

深入研究为iOS和Android创建原生模块，让我们体验到了每个平台的独特之处。通过构建原生iOS组件模块，我们了解了iOS特有的架构和通信路径，开发Android模块则让我们熟悉了Android环境，以及无缝集成所需的配置。

通过将所有内容整合到一个同时与两个平台的原生代码通信的组件中，你现在有了如何在 React Native 和原生功能之间架起桥梁的实际经验。你在这里所构建的技能对于任何希望增强应用功能并提供更丰富用户体验的中级或高级 React Native 开发者来说都是必不可少的。

有了这些知识，你就可以迎接更复杂的原生集成任务了，这将大大增强你在跨平台开发中的优势。感谢您的关注和支持，祝你编程顺利！

如果你想在你的移动应用程序中添加高级功能，从头开始创建一个应用程序，或者需要 React Native 方面的支持和咨询，请访问 casainnov.com，查看他们的 移动应用程序页面 并在那里联系他们。

我分享关于 React、React Native 和 Typescript 的见解。关注我 LinkedIn 或 Medium。

感谢你加入In Plain English社区！希望你在这里度过了一段愉快的时光！在你离开我们之前：

• 别忘了给作者👏点赞和关注哦
• 关注我们：X | 领英（LinkedIn） | YouTube | Discord | Newsletter | 播客节目
• 免费在Differ上创建一个AI驱动的博客。
• 更多精彩内容请访问PlainEnglish.io