react-native-create-bridge

授权协议 MIT License
开发语言 JavaScript
所属分类 应用工具、 终端/远程登录
软件类型 开源软件
地区 不详
投 递 者 阚亮
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

react-native-create-bridge

Bridging native modules & UI components made easy! If you're a JavaScript developer writing your first lines of native code or a more experienced developer looking to eliminate boilerplate from your React Native workflow, this tool is for you.

CONTRIBUTORS WANTED

Getting Started

  1. npm install --save react-native-create-bridge or yarn add react-native-create-bridge
  2. From the root of your React Native project, run react-native new-module
  3. The prompts will ask you for:
  • Your bridge module name
  • Whether you want to create a native module or UI component (or both!)
  • The platforms and languages you would like to support. Currently, we default to iOS/Obj-C and Android/Java, but you can also choose iOS/Swift or Android/Kotlin if you prefer.
  • The directory where you would like your JS files. If it doesn't exist, we'll create it for you.
  1. That's it! �� Sit back and we'll deliver your native module for you lightning fast! ⚡️

Next Steps

Depending on your environment, there may be a couple more steps that you have to take. In future versions of react-native-create-bridge, we want to eliminate these steps.

Android/Java

  • To complete the bridging process, look for MainApplication.java in android/app/src/main/java/com/yourapp
  • Add your package to the getPackages function like this:
@Override
  protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new YourModulePackage()
    );
  }
  • Import your package at the top: import com.yourapp.yourmodule.YourModulePackage;

Android/Kotlin

Adding Kotlin support to your project:
  • You will need to install the Android Studio 3 preview
  • In android/build.gradle, add ext.kotlin_version = '1.1.2-4' to the buildscript and classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" to your dependencies
  • In android/app/build.gradle, add apply plugin: 'kotlin-android' to the top of the file. At the bottom, add compile "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version" to your dependencies
  • Now, you can convert any Java file to a Kotlin file by navigating to Code > Convert Java file to Kotlin file in the top menu
Completing the bridging process:
  • If you already followed all the steps above, you can complete the bridging process by looking for MainApplication.kt in android/app/src/main/java/com/yourapp
  • Add your package to the getPackages function like this:
override fun getPackages(): List<ReactPackage> {
  return Arrays.asList(
      MainReactPackage(),
      YourModulePackage(),
  )
}
  • Import your package at the top: import com.yourapp.yourmodule.YourModulePackage

iOS/Obj-C

  • Currently, you will need to add the files manually to your project in Xcode. Right click on the folder with your app name and select Add Files To YourApp. Select the files associated with your module and click Add

iOS/Swift

  • If this is your first Swift module in your project, you will need to make sure you have a Obj-C bridging header to expose any Obj-C code to Swift. Read Importing Obj-C into Swift to learn more.

Goals

  • Delivers bridge module in Obj-C, Swift, Kotlin, & Java
  • Compatible with all versions of React Native, including v0.40+
  • Split out native UI components & modules into their own templates
  • Config to remove comments for more experienced users
  • Modifies existing project files (AppDelegate.h, MainApplication.java) to complete the bridging process
  • Your feature request could be here! Open up an issue and give us feedback ��

Setting Up Dev Environment

  1. Fork this repo & clone it
  2. cd to where you cloned it
  3. npm install or yarn
  4. After you make changes, link your local package by running npm run package:dev
  5. You can now run react-native new-module locally in a React Native project to test your changes
  6. npm run test will run the Jest test suite

Contributing

react-native-create-bridge is a new project and we would love feedback from the community on how it should evolve. Please report any �� s and let us know how you're using react-native-create-bridge!

If you would like to contribute, please read the contributor guidelines first.

This project adheres to the Contributor Covenant code of conduct.By participating, you are expected to uphold this code. Please report unacceptable behavior to peggyrayzis@gmail.com.

Contributors

A big thank you goes out to these awesome people for their contributions (emoji key):


Kurtis Kemple

��

Duy Bao Nguyen

��

Mike Grabowski

��

Peggy Rayzis

�� �� ��

Mihovil

��

André Neves

��

Jarret Moses

�� ��

This project follows the all-contributors specification. Contributions of any kind welcome!

  • 写在前面 在做react-native开发的时候,我们经常会找到一些第三方组件,并且通过npm install的方式很方便的安装使用。在使用的同时,你是否想过,我们自己应该如何开发并发布一个组件呢?不管是给自己的多个项目共用,或者开源给到别人用,这都是一件很酷的事情。 那么今天,我就以我自己开发的一个在ios和android通用的CardView组件为例来讲一下,如何开发一个自己的组件,并开源到g

  • 1、如何申请微信支付我就不详细多讲解了网上太多了 并且微信比支付宝麻烦太多太多了 2、进入正题我们进入我们的项目中进入android/app/build.gradle文件中在dependencies中添加引入 dependencies{ ... compile "com.tencent.mm.opensdk:wechat-sdk-android-with-mta:+" ..... } 3、在包下

  • react-native 按键事件# 原文链接:https://blog.csdn.net/weixin_42865887/article/details/81366129 react-native默认没有keyEvent,这里主要介绍如何实现将keyEvent(按键事件或者遥控器事件)发送给页面: native java代码 import android.view.KeyEvent; impor

  • react-native 监听手机音量按键(结合原生安卓) 目的:监听手机的物理按键实现相应的功能(给自己的笔记) Android KeyCode 可以自行网上查找 可根据相应 KeyEvent 进行手机按键事件拦截 可根据相应 KeyCode 执行你想要执行的内容 需求 -------- 实现进入指定页面后,使用音量键时执行自定义任务,而不是调节系统音量 解决方案 在 MainActivity.

 相关资料
  • Create React Native App The fastest way to create universal React Native apps npx create-react-native-app Once you're up and running with Create React Native App, visit this tutorial for more informat

  • 我想我已经破坏了我的节点/react-native/react路径/installation/links,从昨天开始我就一直在想该怎么做。 错误包括: 在我的< code >哪个节点中: 我的: 我的路径是: /Users/username/.rvm/gems/ruby-2.3.0/bin:/Users/username/.rvm/gems/ruby-2.3.0@global/bin:/Users

  • 从创建react native弹出后,在android studio中运行react native项目的步骤是什么。我没有找到一个有帮助的一步一步的描述在网上对此。我对android开发还是个新手,面临着与android中的分级版本和其他东西有关的不同问题。我需要从android studio运行它吗,还是只需要运行命令

  • 我对expo和Create-React-Native应用程序的任何事情都还是新手。我的问题是。在学习react-native时,我一直使用create-react-native-app来实现,它工作得很好,直到有一天,我使用了create-react-native-app,这次它展示了一个expo模板。所以我同意“空白项目”选项。然后我运行,但现在我得到一个:app:compiledebugJav

  • Create React App 不用配置就可以创建 React App。 全局安装: npm install -g create-react-app 创建 App: create-react-app my-appcd my-app/ 启动 npm: npm start 打开 http://localhost:3000/  查看你的 App。 如果你准备将其部署到生产环境,只需创建一个压缩包,并且运行 npm run build。

  • create-react-library CLI for creating reusable, modern React libraries using Rollup and create-react-app. This project is sponsored by Saasify. The easiest way to monetize your APIs Intro Features Eas