RN

最新推荐文章于 2021-05-31 09:36:05 发布
原创 最新推荐文章于 2021-05-31 09:36:05 发布 · 347 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文汇总了多个关于 React Native 的学习资源链接，包括极客学院提供的教程及 DECO RN-IDE 开发工具介绍。适合希望快速入门或深入学习 React Native 技术的开发者。
《React-Native系列》11、 图解RN布局之FlexBox，三分钟上手写RN界面
等待就是浪费青春
08-12 1万+
前面其实已经写过很多RN界面了，今天再来回顾下FlexBox布局，主要是记录笔记，必备日后查阅。 综述 flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用flex布局的元素，称为flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。 f
iOS原生界面与RN界面互调及传值
高级软件开发工程师--周玉的博客
10-25 3859
文章目录3. iOS原生与RN互调及传值3.1 RN跳转原生界面3.2 RN跳转原生界面并传值3.3 RN跳转原生界面并传值后,原生界面再回调给RN界面相关信息3.4 原生界面传值给RN页面 3. iOS原生与RN互调及传值 3.1 RN跳转原生界面 iOS端: 导入#import <React/RCTBridgeModule.h>. 需要创建一个类遵守RCTBridgeModule...
前端笔记5.RN界面设计
越开源越幸运
10-29 1080
上次课程回顾 React的基本语法：JSX、props、state。   2、本次课程内容 2.1、RN的界面开发 基于React-Native完成界面开发，需要在项目中编写App.js文件。 这个文件导出的组件就会显示到界面上。 在这个文件里使用的语法类似React，也是JSX，不过React-Native提供了一些默认封装好的组件来使用。   View：控制布局的组件，类似An...
使用React Native 混合开发，原生页面跳转到不同的RN页面
02-26
Android原生开发跳转到某个RN单页面的demo。 目前公司项目全部采用原生开发，现在想提升开发效率，把部分Android，iOS两端公共高复用的界面使用RN去做。就需要在原有的项目基础上加入RN并且单独跳转到不同的RN界面去。网上查了一下相关资料发现大部分都是从RN界面跳转到原生的介绍。RN不好处理的地方，直接调用原生界面去制作。很少有介绍有从原生跳转到RN某个单页面的介绍。详情可以查看我的博客介绍以使用方法。
android跳转到rn界面,React-Native 如何实现原生页面跳转到 rn 页面
weixin_35664081的博客
05-31 725
一个 React-Native Android 的项目，启动之后是一个用 js 写的登录页面(login.js)，然后我会跳转到一个 android 原生的页面(NativeActivity.java)，然后我现在希望从这个原生的页面跳转到另一个 js 的页面(other.js)。我现在的做法是给 other.js 做了一个原生的容器 OtherActivity.java，部分代码是这样的：pub...
三相计量芯片-RN8302B资料
06-23
三相计量芯片RN8302B是一款专门用于电力计量的高精度芯片，其应用范围广泛，涵盖了工业控制、智能电网、家庭电力计量等多个领域。该芯片具有极高的测量精度和稳定性，支持三相四线制电能计量，可以同时测量电压、...
RN8209D.zip_RN8209D_RN8209协议_RN8209资料_rn8209_校表
07-14
RN8209D是一款高性能的蓝牙低功耗（Bluetooth Low Energy, BLE）无线通信模块，广泛应用于物联网、智能家居、健康监护等领域。该模块由瑞昱半导体（Realtek Semiconductor）制造，具有高集成度和易用性。在这个名为...
RN8302Bspi通讯例程RN8302B-RN8302spi通讯例程
06-23
RN8302B是一款广泛应用于工业控制领域的通讯模块，它支持多种通讯协议，其中spi通讯协议是其支持的主要通讯方式之一。spi通讯，全称Serial Peripheral Interface，是一种高速的全双工通讯接口，常用于微控制器和各种...
RN8302B-电表芯片程序.zip_RN8302 SPI通讯_RN8302B_RN8302B的编写库函数_balln3t_rn
07-15
RN8302B是一款专用于智能电表的微控制器芯片，它在电力系统中扮演着重要的角色，负责电能计量、数据通信以及控制功能。本文将深入探讨RN8302B芯片、SPI通讯协议及其与51系列单片机的结合应用，以及RN8302B的库函数...
RN与原生交互（一）——基本页面跳转
weixin_33920401的博客
06-13 1277
React Native(以下简称RN)开发app过程中大部分都可以在JS端完成，但是也有一些功能是需要原生端来完成的。这时RN与原生端就不可避免的需要进行交互，比如页面跳转和数据传递。本篇文章主要以RN——原生、原生——RN——原生为例来讲解如何进行基本的页面跳转操作。 关于页面跳转，我写了三个demo。这里发下地址： RNAddNative RNPushToNative NativeJump...
RN布局（登陆界面Demo）
targetcloud
12-18 4480
/** * Created by targetcloud on 2016/12/17. */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TextInput } from 'react-native';
RN 的页面布局
weixin_33898876的博客
10-26 741
从https://blog.youkuaiyun.com/liangzelei/article/details/53965417 转载 React Native布局详细指南https://www.jianshu.com/p/688b9108a922 Flexbox 介绍 flexbox 是由伸缩容器和伸缩项目组成。任何一个元素都可以使用flexbox布局。容器默认存在两根轴：...
android跳转到rn界面,第五章 RN与Native—由原生页面跳转到Rn页面；在Rn页面调用Android Native组件和Native数据...
weixin_35227213的博客
05-31 1074
在本教程的开始，就曾经提到过纯Rn和原生与RN混合开发的两种概念。之前的两个Demo如果不考虑难易程度的话，则为纯Rn应用开发。但在实际生产中，毕竟Rn的组件还不是那么完善，所以，当我们需要比较炫酷的动画效果或者在使用Rn组件时遇到诡异的坑而没有进展的时候，我们可以使用Rn与原生协同开发来实现最终效果。React Native设计为可以在其基础上编写真正的原生代码，并且可以访问平台所有的能力。这是...
rn与ios交互 rn(push)原生界面
江苏小白龙
03-27 2403
react与原生交互有点类似于ios中的webview与h5交互,交互都需要有一端先发起交互请求,然后才能双方交互,当然ios第一次加载(webview或rn页面)也算交互请求那么总是ios端先发起交互请求,如果不算,那么都是其他端发起交互请求可以是传值,可以是监听函数.比如:rn端要给ios传值,那么react端必须监听ios中的某一个类中的某一个函数才能发起交互.如果ios想向react交互,...
RN实战项目页面导航和启动页面实现(三)
kimi
04-11 8043
RN实战项目页面导航和启动页面实现(三)RN中处理页面切换可以使用导航器来实现，本项目中用的是Navigator，而官方已经不推荐使用了，而采用新的react-navigation库来替代。 官网 react-navigation;Navigator RN中文网学习直接看代码/** * Sample React Native App * https://github.com/facebook/
RN入门---环境搭建和第一个RN项目
wwww_dong的博客
11-22 1万+
一、RN环境的搭建，参照RN中文网，有以下概念Chocolatey：Chocolatey是一个Windows上的包管理器，用于安装windows程序 Python 2： NodeJS：NodeJS是基于javascript的服务端。将本地的js文件（RN里，将返回的js文件通过依赖React翻译成React格式，再通过依赖react-native，翻译为react-nat
《React-Native系列》5、RN实现弹出选择界面与动画效果
热门推荐
等待就是浪费青春
07-20 2万+
今天做了个弹出框，见文章最后图片所示，弹出的时候从屏幕下方弹入，用户选择后又从下方弹出，同时有遮罩效果。 首先，我们是怎么实现弹出框，我这边用的是absolute 绝对定位，包括弹层的覆盖，Dialog的绝对位置。 Dialog的布局在这儿就不说了，flex-box、盒子模型... 那么再来说说动画。 参考：RN动画入门Animated 1、创建一个Animated.Value
rn
最新发布
07-31
### 什么是 React Native (RN) ? React Native（简称 RN）是一个由 Facebook 开发的开源框架，用于构建跨平台的移动应用程序。它允许开发者使用 JavaScript 和 React 来创建原生 iOS 和 Android 应用。RN 的出现极大地简化了移动应用的开发过程，使得开发者可以更快速、更高效地构建高质量的应用[^1]。 ### React Native 的主要优势 React Native 的一大优势是跨平台开发。传统上，iOS 和 Android 开发是两条平行的道路，开发者需要分别开发并维护两套代码。而 React Native 让开发者可以编写一套代码，并同时运行在 iOS 和 Android 上[^2]。这种特性不仅节省了开发时间，还降低了维护成本。 ### React Native 与 React 的关系 React Native 是基于 React 的理念构建的，但它并不是 React 的子集或简化版。相反，它是一个完整的平台，可以让开发者使用 JavaScript 来开发真正的原生应用。React Native 采用 React 的范式，即组件化开发模式，使得开发者能够以声明式的方式构建用户界面[^3]。 ### React Native 的环境配置 在安装和配置 React Native 时，通常需要使用 Android Studio 来管理 Android SDK。Android Studio 默认会安装最新版本的 Android SDK，但目前编译 React Native 应用需要的是 Android 9 (Pie) 版本的 SDK。需要注意的是，SDK 版本并不等同于终端系统的版本，React Native 目前支持 Android 4.1 以上的设备。开发者可以在 Android Studio 的 SDK Manager 中选择安装不同版本的 SDK 以满足项目需求[^4]。 ### 示例代码：React Native 应用的基本结构 以下是一个简单的 React Native 应用示例，展示了如何创建一个基本的移动应用界面： ```javascript import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const App = () => { return ( <View style={styles.container}> <Text style={styles.text}>Hello, React Native!</Text> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 20, fontWeight: 'bold', }, }); export default App; ``` ### React Native 的适用场景 React Native 适用于需要快速开发跨平台移动应用的场景。它特别适合那些希望减少开发时间和成本的项目，同时也适合需要频繁更新和维护的应用。由于其基于 JavaScript 和 React 的特性，熟悉前端开发的开发者可以轻松上手 React Native。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值