iOS React Native创建自定义模块

我不是女神ヾ 2022-05-29 12:25 212阅读 0赞

React Native 支持 iOS， Android 和 Windows 三个平台。本文我们只考虑 iOS。

首先介绍一下，RN自定义模块的目录结构为：

- android：Android平台的原生代码
    - ios：iOS 平台的原生代码
    - index.js：自定义模块的入口（还有一种方式是定义 index.ios.js 和 index.android.js来分别作为对应平台的入口）
    - package.json： 自定义组件的npm包信息
    
    - README.md：相关文档说明

然后我们开始进入正题(**整个过程中不要关闭终端**)：

首先，打开Mac的终端，进入一个RN的项目目录下，必须是在RN的项目目录下，不然会报错：

Command new-library unrecognized. Make sure that you have run npm install and that you are inside a react-native project.

没有项目的话，可以先创建一个(DemoProject是项目名，随便起):

react-native init DemoProject --version 0.55.4

然后进入项目目录，执行这句话(Lib的名字可以随便起)：

react-native new-library --name "DemoLib"

上述命令帮我们做了以下两件事情：

在 DemoProject/ 目录下，创建一个 Libraries/ 目录。

把我们上面创建的DemoLib 放在 Libraries/ 下面。

然后，进入Libraries/DemoLib/目录下，发现有一个工程文件DemoLib.xcodeproj，打开它，把你的代码拖入。

接着切换到终端，输入：

npm install <library-with-native-dependencies> --save

<library-with-native-dependencies>是你的DemoLib.xcodeproj所在的那一级目录，直接把Libraries/DemoLib拖到终端里就行。

然后输入：

react-native link

再打开之前新建的RN项目DemoProject，就会发现他的自工程里多了一个DemoLib.xcodeproj

至此创建自定义模块就完成了..

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关 React Native添加自定义全局组件

> 在开发rnApp的时候想自己封装一个自定义的Toast组件，又不想在每个组件文件内单独引用，于是自己琢磨了一个方法将组件添加到全局。这里举例封装一个自定义的Toast组

心已赠人/ 2023年07月09日 10:29/ 0 赞/ 22 阅读

相关 react native实现自定义导航栏

const ImageHeader = props => ( <View style={ {position: "relative"

左手的ㄟ右手/ 2022年12月27日 07:13/ 0 赞/ 300 阅读

相关 React Native iOS原生模块开发实战|教程|心得|如何创建React Native iOS原生模块

前言一直想写一下我在React Native原生模块封装方面的一些经验和心得，来分享给大家，但实在抽不开身，今天看了一下日历发现马上就春节了，所以就赶在春节之前将这篇博

清疚/ 2022年12月20日 12:46/ 0 赞/ 184 阅读

相关 React Native自定义View解析Emoji

一、需求准备在react native的类中实现可以解析多种字符格式的内容并放入到指定文本中。效果图如下：

阳光穿透心脏的1/2处/ 2022年06月02日 07:19/ 0 赞/ 283 阅读

相关 React Native ：自定义视图

> 代码地址如下： > [http://www.demodashi.com/demo/11686.html][http_www.demodashi.com_demo_116

迈不过友情╰/ 2022年05月30日 10:07/ 0 赞/ 258 阅读

相关 iOS React Native创建自定义模块

React Native 支持 iOS， Android 和 Windows 三个平台。本文我们只考虑 iOS。首先介绍一下，RN自定义模块的目录结构为： - a

我不是女神ヾ/ 2022年05月29日 12:25/ 0 赞/ 213 阅读

相关 react-native自定义文本输入框

react-native-custom-textInput react-native-custom-input,一个自定义的输入组件 The final render

旧城等待，/ 2022年05月22日 06:21/ 0 赞/ 412 阅读

相关 react-native自定义按钮

The final rendering ![The final rendering-image][] Description: A custom button c

不念不忘少年蓝@/ 2022年05月22日 06:20/ 0 赞/ 309 阅读

相关 React Native 封装自定义的Button

import React, { Component } from 'react'; import { StyleSheet, V

清疚/ 2022年05月09日 13:46/ 0 赞/ 276 阅读

相关 react-native 自定义轮播组件

最近需要一个轮播的功能，查看了其他的轮播组件，好像都不满足需求需要的效果如下 ![20190626120647609.gif][] 直接上代码了 imp

不念不忘少年蓝@/ 2021年09月20日 12:06/ 0 赞/ 373 阅读