React NativeScript is A React renderer for NativeScript, allowing you to write a NativeScript app using the familiar React style.
I'm always hanging out in the #react chat of the NativeScript Slack if you'd like to talk about this project.
Setup
# Make sure that you have `tns` (the NativeScript CLI) installed:
# https://docs.nativescript.org/start/quick-setup
tns create myApp --react
cd myApp
npm install
# The Preview and Playground apps are awaiting an update from
# RNS v0 to v1, so the `tns preview` workflow isn't supported
# yet. We're working on it. – 18th July 2020
#
# tns preview
# or
tns run ios
# or
tns run android
Documentation
Example real-world app
See the Apps showcase in the docs to see various apps built with React NativeScript.
One example is my rpstrackerrns issue-tracking example app, which demonstrates how you can make fully native, professional-looking UIs with RNS:
| Login Page |
Backlog Page |
Detail Page |
Plugins
Although NativeScript lets you write native code inline as JavaScript, you can also write modules purely using native code (e.g. Objective-C and Java), and access the code directly in NativeScript via JavaScript. When a common, cross-platform JavaScript API is provided for such modules, it is called a "plugin", and can be thought of as equivalent to a React Native "native module". NativeScript has a rich ecosystem of these plugins – see the NativeScript Marketplace.
React NativeScript uses the same plugins API as NativeScript Vue and NativeScript Angular, so all those plugins should be compatible (although generally needing to be consumed with any type, as most plugins are only typed for NativeScript Core). Instructions on how to integrate plugins, and provide typings for React, can be found in the React NativeScript plugins documentation.
Why not just use React Native?
��♂️
React NativeScript shares most of the good parts of React Native, but above all gives a first-class development experience for interacting with native code. Never write another native module again – you can write your native code inline using JavaScript!
React Native |
React NativeScript |
|
| UI renderer | React |
|
| Programming language | JavaScript (with TypeScript typings available) |
|
| Platforms | iOS + Android + many more |
iOS + Android |
| Bundler | Metro |
Webpack |
| Javascript VM threading | Separate 'JS' thread |
Main (UI) thread |
| Native API access | ||
| Synchronicity | Mostly asynchronous. Typically involves sending JSON-serialisable messages back-and-forth over a native-to-JS bridge. Synchronous only in advanced cases such as JSI and C++ TurboModules, and static values from native modules. |
Synchronous: The JS VM has direct bindings to the native context, and sits on the main (UI) thread. |
| Type marshalling | Only supports JSON-serialisable types[iOS][Android], and only passes by value rather than by reference. |
Can marshal nearly any data type[iOS][Android] back and forth between the JS and native contexts, and even passes by reference from native to JS, allowing APIs to be called on native class instances from the JS context. Memory management of native references held by JS is very clever. |
| Bindings | Users must write their own bindings[iOS][Android] (except possibly for the advanced feature of C++ TurboModules) and try not to get anything wrong. |
Bindings between the Objective-C/Java runtimes and JavaScript will be automatically generated[iOS][Android] for any source code included in your app. |
| Typings | Users must write the typings for their native modules manually[iOS][Android] (except possibly for the advanced feature of C++ TurboModules) and try not to get anything wrong! |
Typings can be automatically generated for bindings[iOS][Android], and typings for the whole platform SDK are already provided. |
| Swift and Kotlin support | For Swift, can write implementation but must expose to React Native via an accompanying Obj-C file and manually-written bindings. Documentation also very limited. Not sure what's involved for Kotlin, but it is supported. |
For Swift, just follow a few steps such as adding the |
| UI access | Very limited access to the underlying UI components (e.g. with a ref to a View component, you cannot do much – you can't traverse the UI tree, make synchronous measurements, or call the underlying APIs of the UI component). Exceptions may include the advanced case of Reanimated 2 worklets. |
All NativeScript UI elements provide full, synchronous API access to the underlying UI component. e.g. on iOS, with a ref to a React NativeScript |
| Hot reloading | All native code changes (except possibly JSI and worklets) require app recompilation. |
Any native API accesses via JS can be hot reloaded. Native code written in Obj-C / Java does, however, still require an app recompile upon change. |
FAQ
Is it production-ready?
It's based on React, NativeScript Core, and NativeScript Vue, which are each individually production-ready. Make of that what you will.
Can this consume React Native projects?
No, but it could with a lot of hard work. Allowing React NativeScript to run projects that were written for React Native is a huge project, but it's theoretically very possible – it would be a project on exactly the same scale as React Native Web. See react-nativescript-compat-react-native for work towards this, where I've ported part of RNTester as a proof-of-concept...
Can this consume React Native native modules?
Certainly not UI-based native modules. But all flavours of NativeScript can consume native code, so it can probably consume React Native native modules, though may take a small bit of refactoring
Stanisław Chmiela (@sjchmiela) produced a proof-of-concept for importing Expo Unimodules into NativeScript that could be used as a basis for this effort. Original discussion here.
Contributing
��♀️
Ideally get in contact via the Slack channel before starting any PRs!
-
NativeScript和React不同，无法与原生项目融合，即你只能纯写个NativeScript的应用，不可能把它抽离出来作为某原生应用的一部分来出现。虽然说它和React的出发点一致都是"用Web APP的开发速度打造Native App的体验"。 组件支持不够完善 XML解析引擎不够完善
-
简单介绍下react-native-webview 替换 react-native 自带的 webview 的过程中 遇到的问题。 基于版本： "react-native": "0.60.6", "react-native-webview": "^7.4.2", 1、安装及使用方法就省略了，可以看下react-native-webview这个文档。 2、react-native-webvie
-
直奔主题，不贴官方文档。在支持RN客户端和基于vue开发的前端页面信息交互的期间，记录一下关于WebView和html的交互过程，主要通过一下三点来记录： html向RN通信 RN向Html通信 在项目中使用 官方文档有介绍如何进行交互，官网传送门 React Native -> Web: The injectedJavaScript prop React Native -> Web: The i
-
文档：使用 TypeScript · React Native 中文网 1.简介 TypeScript是一种通过添加类型定义来扩展JavaScript的语言，非常类似于Flow。 虽然React Native是内置在Flow中的，但默认情况下它同时支持TypeScript和Flow。 2.入门 如果要开始一个 TS React Native 项目，则有几种不同的上手方法。 npx react-na
-
问题1: react-native-collapsible---->undefined is not an object evaluating reactNative.View.propTypes 解决方案 升级 react-native-collapsible 问题2: antd-mobile-rn undefined is not an object (evaluating' react.P
-
下面是一些rn问题的分类： 1.rn的版本问题，如0.55.6版本就是这样的，安装的时候就会报错， 2.link组件的问题，有些时候会发生自动link不全或者路径错误的情况， 3.安卓版本问题，组件的版本和rn项目版本统一 4.其他问题， 其实我建议还是学一下android原生，包括gradle，不然后面涉及太多原生问题很难解决。 1.rn版本问题 rn版本更新的很快，有些版本说实话根本用不了，比
-
安装包 react-native-webview 简单示例 import React from 'react' import WebView from 'react-native-webview' class Component extends React.Component { createHtml() { return ` <div id="canva
-
方法一（postMessage与onMessage） const BaseScript = ` (function () { var height = null; function changeHeight() { if (document.body.scrollHeight != height) { height = document.body.scr
-
问题内容： 我注意到可以这样导入： …或像这样： 第一个导入模块中的所有内容（请参阅：导入整个模块的内容） 第二个仅导入模块导出（请参阅：导入默认值） 似乎这两种方法是不同的，并且根本上是不兼容的。 为什么它们都起作用？ 请参考源代码并解释该机制…我有兴趣了解其工作原理。 ES6常规模块信息回答了该问题。 我在问使模块像这样工作的机制。在这里，它似乎与源代码中的 “ hacky”导出机制有关，但尚
-
这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后，你将学到： 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试，以及 使用Redux管理状态 我们会使用create-react-app工具快速搭建工程环境。 这里假设你已经在使用Node.js和npm。 并且已经了解了React的基础知识。 我们之所以使
-
我已经改用react Native制作跨平台应用程序（虽然没有制作）。我只是想要一个答案，我的问题，反应和反应之间的区别。我在网上搜索了一下，但没有找到合适的答案。
-
问题内容： 与 哪个更好，为什么？ 还是除了以后编写更少的代码外没有其他区别？ 写作是否意味着只导入Component对象？ 问题答案： 让您代替。它减少了React名称空间的键入和重复，这通常是一种理想的现代编码约定。 此外，Webpack 2和Rollup之类的工具会“摇晃”，这意味着任何未使用的导出都不会捆绑到您的最终代码中。使用/，您可以保证所有React的源代码都将被捆绑。使用，某些工具
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
我正在使用“React admin”创建一个管理界面（前端）。我正在使用spring boot作为我的REST API。我的React应用程序的url是：“http://localhost:3000”。我的spring boot API的url是：“http://localhost:8080”。 下面是CORS配置的spring boot代码，它在一个单独的类中，称为CORSCONFIG： 下面是
-
主要内容：React 实例React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。 使用方法 绑定一个 ref 属性到 render 的返回值上： 在其它代码中，通过 this.refs 获取支撑实例: 完整实例 你可以通过使用
-
主要内容：React 实例React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。 以下实例演示了获取 Github 用户最新 gist 共享描述: React 实例 cla