React-Native

【React Native】动态路由与参数传递

参数传递import{View,Text,StyleSheet,TouchableOpacity}from"react-native";import{Link,useRouter}from"expo-router

秀秀_heo·2025-07-19 18:00

react-native android 环境搭建

环境：macjava版本：Java11最重要：一定要一定要一定要react涉及到很多的依赖下载，gradle和react相关的，第一次安装环境时有外网环境会快速很多。安装nodejs安装react-nativenpminstallreact-native-clinpminstallreact-native创建一个新项目react-nativeinitfirstReact替换gradle下载源rep

·2025-07-12 17:26

ReactNative图片自适应高度

importReact,{useState,useEffect}from'react';import{Image}from'react-native';exportdefault({source={},

吴佩佩佩佩·2025-07-09 08:30

React-Native痛点解析之开发环境搭建及扩展

ReactNative简直太火了，国内大公司都在争先恐后的尝鲜，让人难以相信这是诞生刚刚一年的开源项目。正因为它的年轻，在使用它进行开发时难免会遇到这样那样的坑，因此，我们邀请了《ReactNative入门与实战》的作者之一，魅族高级研发经理魏晓军来为我们解析RN开发中的痛点。本文分享的是在环境搭建和扩展中会遇到的问题与解决方案。引言ReactNative的出现，为APP开发者们带来了冲动和激情，

cuoban·2025-07-06 13:03

react-native 0.6x升级适配说明

react-native0.6x升级适配说明RN0.6x已经发布有一段时间了，react-navigation也在前不久进入了5x的时代。为了让大家少踩坑，现已将课程升级适配到RN0.6x以及react-navigation5x，另外，包括友盟分享和统计在内的所有插件也已升级是配到最新版。为了帮助到大家顺利的学习使用新版本RN与react-navigation等相关库，我将整个的升级适配过程总结出

Bearin·2025-07-05 06:18

react-native 踩过的坑

一、遇到过的坑1.1执行Downloadinghttps://services.gradle.org/distributions/gradle-2.4-all.zip时报错解决方法：复制报错的下载链接，用迅雷下载，将项目地址中的AwesomeProject/android/gradle/wrapper/gradle-wrapper.properties中的distributionUrl=https

\光辉岁月/·2025-06-30 12:09

native react 更新机制_React-Native 实现增量热更新的思路(1)

所谓热更新就是在不重新安装的前提下进行代码和资源的更新，相信在整个宇宙中还不存在觉得热更新不重要的程序猿。增量热更新就更牛逼了，只需要把修改过和新增的代码和资源推送给用户下载即可，增量部分的代码和资源都比较小，所以整个热更新流程可以在用户无感的情况下完成，我已经想不到更好的更新方式可以让我装更大的逼了。一.实现脚本的热更新1.为什么可以热更新简单地说，因为RN是使用脚本语言来编写的，所谓脚本语言就

彼一暝·2025-06-24 11:50

React Native【详解】内置 API

屏幕Dimensions获取屏幕信息import{Dimensions}from"react-native";exportdefaultfunctiondemo(){const{width,height

朝阳39·2025-06-20 17:28

解决react-native软键盘弹出挡住输入框的问题

from'react';import{View,Text,Button,StyleSheet,TextInput,ScrollView,KeyboardAvoidingView,Dimensions}from'react-native

曲小强·2025-06-20 00:58

react-native键盘弹起遮挡输入框

importReact,{Component}from'react';import{Platform,StyleSheet,Text,View,Image,FlatList,Dimensions,WebView,TouchableOpacity,TextInput,NativeModules,DeviceEventEmitter,Alert,ToastAndroid,ActivityIndicat

花程序媛·2025-06-20 00:28

react-native键盘遮挡输入框

1、使用组件KeyboardAvoidingView使用注意:在render内使用，需要设置高度keyboardVerticalOffset：有时候应用离屏幕顶部还有一些距离（比如状态栏等等），利用此属性来补偿修正这段距离。2.与ScrollView使用ScrollView标签不要设置高度render(){return(...this._extraUniqueKey(item,index)}ren

huaiyanchen·2025-06-20 00:57

react native中使用fetch做get请求和post请求

get请求：importReact,{useState,useRef,useEffect}from'react'import{View,TextInput,Text,Button}from'react-native'importstylefrom

·2025-06-17 03:31

React Native【实战范例】网格导航 FlatList

importReactfrom"react";import{FlatList,Image,SafeAreaView,StyleSheet,Text,View,}from"react-native";interfaceGridItem

朝阳39·2025-06-15 21:14

react-native中ScrollView套ScrollView

react-native中ScrollView套ScrollView（安卓环境）ScrollView套ScrollView，子ScrollView无法滚动试了很多种方法，都是无效的，最终还是在官方文档中找到了

诚实可靠王大锤·2025-06-15 05:30

React Native【实战范例】水平滚动分类 FlatList

importReactfrom"react";import{FlatList,SafeAreaView,StyleSheet,Text,View}from"react-native";interfaceitemType

朝阳39·2025-06-14 08:36

react实现聊天界面_react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

一、前言9月，又到开学的季节。为每个一直默默努力的自己点赞！最近都沉浸在reactnative原生app开发中，之前也有使用vue/react/angular等技术开发过聊天室项目，另外还使用RN技术做了个自定义模态弹窗rnPop组件。一、项目简述基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等

·2025-06-06 00:22

[特殊字符] 在 React Native 项目中封装 App Icon 一键设置命令（支持参数与默认路径）

前置依赖使用的是社区维护的CLI工具：@bam.tech/react-native-make它扩展了react-native命令，支持set-icon功能。

YuZou 邹宇·2025-06-05 23:48

React-Native之可配置化的图片资源预加载方案

解决方案1、图片预加载React-Native官方Imag

HGC2016·2025-06-04 09:09

react-native的token认证流程

在ReactNative中实现Token认证是移动应用开发中的常见需求，它用于验证用户的身份并授权其访问受保护的API资源。Token认证的核心流程：用户登录(Login):用户在前端输入用户名和密码。前端将这些凭据发送到后端API。后端验证凭据。如果验证成功，后端会生成一个Token（通常是JWT-JSONWebToken）并返回给前端。前端接收到Token后，将其安全地存储起来（例如使用Asy

zwjapple·2025-06-02 15:57

React-Native 宝藏库大揭秘：精选开源项目与实战代码解析

1.引言1.1React-Native简介React-Native是由Facebook开发的一个开源框架，它允许开发者使用JavaScript和React的编程模型来构建跨平台的移动应用。

@sinner·2025-05-29 09:50

React-native的新架构

本文总结:文章主要介绍了ReactNative的新架构，包括以下几个方面的内容：✨如何抹平iOS和Android样式差异，提升跨平台一致性；分析了旧架构中存在的问题，如通信瓶颈、启动慢、维护复杂等；介绍了JSI中间层带来的变革，如：不再强依赖JavaScriptCore引擎；可直接在JS层调用Native方法，提升交互效率；讲解了RN的渲染阶段流程；常用基础库（如ReactNavigation）的

·2025-05-28 20:17

react-native在模拟器中访问本地服务踩坑

localhost，127.0.0.1不能通信。可以在模拟器中测试与本地开发环境中的服务进行交互，但需要确保以下几点：网络配置：模拟器通常会有自己的网络设置，与主机（本地开发环境）的网络隔离。许多模拟器（例如AndroidEmulator或iOSSimulator）支持通过localhost或127.0.0.1访问主机上的服务，但有时需要使用主机的特定IP地址（例如10.0.2.2在Android

zwjapple·2025-05-22 04:17

react-native非路由组件中实现路由跳转

使用场景：对请求进行封装，要在封装的逻辑中进行退出登录，跳转到login页面的功能RootNavigation.jsimport{createNavigationContainerRef}from'@react-navigation/native';exportconstnavigationRef=createNavigationContainerRef();

九段刀客·2025-05-15 12:58

React-ZarmUI：跨平台React & React-Native移动端UI组件库

本文还有配套的精品资源，点击获取简介：React-ZarmUI是专为React和React-Native开发者设计的移动端UI组件库，提供简洁、易用、高度可定制化的组件，支持Web和原生移动应用开发。

weixin_42668301·2025-05-13 03:12

React-native脚手架探索

本文总结本文主要探讨了ReactNative脚手架的使用与选择，介绍了两种主流工具：ReactNativeCLI和ExpoCLI，并对它们的特点进行了比较分析。ReactNativeCLI：适合需要原生模块能力、自定义程度更高的项目；ExpoCLI：上手简单、配置少，适合快速开发和原型验证。文章还详细介绍了两者的优缺点、组成部分，帮助我们更好地理解它们的适用场景。在实战部分，文章讲解了：如何启动项

·2025-05-12 13:50

React ES7 React/Redux/GraphQL/React-Native snippets插件常用代码块

ES7React/Redux/GraphQL/React-Nativesnippets插件常用代码块生成无状态组件rfc生成类组件rcc打印clg导入imp导入Reactimrthis.setStatesst导入React,useState,useEffectimrse生命周期方法cdm类组件定义方法met生成匿名函数anfn函数组件定义方法nfn解构对象dob解构数组dar间歇调用sti超时调用

执着的派大星·2025-05-11 00:39

【VSCode】ES7 React/Redux/GraphQL/React-Native snippets 插件详解

文章目录一、插件简介1.插件的作用2.安装与配置二、常用代码片段介绍1.React代码片段1.1函数组件1.2类组件2.Redux代码片段2.1创建action2.2创建reducer3.ReactHooks代码片段3.1useStateHook3.2useEffectHook4.GraphQL代码片段三、如何在项目中使用插件的代码片段1.快捷键提示2.自定义配置四、插件的优势与适用场景1.提高开

Peter-Lu·2025-05-11 00:06

“ES7+ React/Redux/React-Native snippets“常用快捷前缀

请注意，这是一个常用的列表，不是扩展提供的所有前缀。最完整和最新的列表请参考扩展的官方文档或在VSCode中查看扩展的详情页面。React(通常用于.js,.jsx,.ts,.tsx):rfce:ReactFunctionalComponentwithExportDefaultrafce:ReactArrowFunctionComponentwithExportDefaultrce:ReactCl

zwjapple·2025-05-11 00:34

Error while updating property ‘stroke‘ in shadow node of type: ARTShape

一、问题发现好多人跟我一样踩坑react-native-progress与最新版本的react-native不兼容，或者使用到了react-native-community/art的Shape等组件，出现

流星雨在线·2025-05-08 01:57

react-native记录zIndex控制页面层次出现透过去的现象

一、问题我这边用react-native为了实现手势按住一个按钮之后切换场景，使用了zIndex进行页面层次的控制，在所有的ios手机上与绝大部分安卓手机上都表现正常。

流星雨在线·2025-05-08 01:57

react-native @react-navigation/native 组件用法介绍

一、安装与基础配置核心依赖安装需安装以下包：npminstall@react-navigation/nativenpxexpoinstallreact-native-screensreact-native-safe-area-context若使用Stack导航，需额外安装：npminstall@react-navigation/native-stack#推荐原生栈导航#或旧版Stack导航（需手势

agenIT·2025-05-01 17:00

react-native 搭建项目

1、androidsdk安装2、android环境配置C:\Users\Administrator\AppData\Local\Android\Sdk/3、path配置4、创建项目npx@react-native-community/cliinitAwesomeProject5、路由跳转import{createNativeStackNavigator}from'@react-navigation

gis开发·2025-04-29 04:29

mac搭建react-native开发环境记录

之前一直使用vue写项目的，看了同事写的react-native项目，自己想去尝试写个react-native的小demo，那么第一步是要配置要电脑环境。

和世界不一样，那就不一样！·2025-04-20 14:59

react native中基于webview的腾讯图形验证码

npmireact-native-webviewreact-native-webviewimportReact,{useEffect,useState}from'react';import{StyleSheet,Text,View}from'react-native

KeYiTangPing·2025-04-16 18:54

ClkLog集成指南

一、基础事件集成在使用ClkLog作为神策SDK（如WEBJS、Android&iOS、React-Native等客户端）的数据接收端时，需注意以下几点1.1.会话集成ClkLog的基础流量统计指标中的访问次数

·2025-04-10 14:11

React-Native优质开源项目

ReactNative是Facebook开发的一种开源框架，允许开发者使用JavaScript和React编写原生应用。它提供了一套跨平台的UI组件，可以在iOS和Android上实现一致的用户体验。以下是一些优质的ReactNative开源项目：ReactNativeElementsReactNativeElements是一个基于ReactNative的开源UI组件库，提供了丰富的可定制组件，如

喵丶派对·2025-04-05 07:02

React：React-Native开源项目

转载几个开源项目1、Facebook’sF8ConferenceAppReactNative最佳学习模版-F8App开源了,界面和体验是相当的完美,这个是Facebook官方开发的,所以放在第一位进行推荐。现在在github将近1.4W个star了。项目地址：https://github.com/fbsamples/f8app2、Reading来自饿了么RN大神开源的reading项目,已经完成A

苹果醋3·2025-04-05 07:32

react-native 中的硬件调用方式集合（蓝牙摄像头传感器等）安卓和ios 《前端笔记》

目录1.摄像头（Camera）iOS:Android:2.麦克风（Microphone）iOS:Android:3.加速度计（Accelerometer）iOS:Android:4.陀螺仪（Gyroscope）iOS:Android:5.磁力计（Magnetometer）iOS:Android:6.近距离传感器（ProximitySensor）iOS:Android:7.光线传感器（LightSe

调试大师（八岁习武）·2025-04-03 19:32

整理了一份React-Native学习指南

自己在学习React-Native过程中整理的一份学习指南，包含教程、开源app和资源网站等，还在不断更新中。欢迎pullrequests！

老金的杂货铺·2025-03-27 08:11

学习React-Native

自己在学习React-Native过程中整理的一份学习指南，包含教程、开源app和资源网站等，还在不断更新中。欢迎pullrequests！

donyFeng6·2025-03-27 08:09

React-Native学习指南

作者：ele828原文地址：https://github.com/ele828/react-native-guide本指南汇集React-Native各类学习资源，给大家提供便利。

aishi9935·2025-03-27 08:09

Android com.facebook.react:react-native:+ 版本问题

Executionfailedfortask':app:desugarBetaDebugAndroidTestFileDependencies'.>Couldnotresolveallfilesforconfiguration':app:betaDebugRuntimeClasspath'.>Failedtotransformreact-native-0.71.0-rc.0-debug.aar(c

小铁-Android·2025-03-22 04:10

react-native 实现AES RSA MD5加密

importReact,{Component}from'react';import{Platform,StyleSheet,Text,View,Image,Dimensions,ScrollView,TouchableOpacity,Modal,TouchableHighlight,NativeModules,ToastAndroid,Alert,FlatList,}from'react-nati

花程序媛·2025-03-22 01:39

react-native中使用axios_React Native 三端同构实践

ReactNative三端同构实践来源：ibm.com/cnReactNative三端(Web、iOS、Android)同构是指在不改动原ReactNative的代码下，让其在浏览器中运行出和在ReactNative环境下一样的页面。对于使用ReactNative开发的页面，如果又单独为Web平台重复写一份代码代价是极其大的，而ReactNative三端同构能以零花费快速做到一份代码三端复用。Re

weixin_39874795·2025-03-18 21:36

在react-native中使用echart绘制图表

引用自：https://www.jianshu.com/p/6eae23b3ece9.有前辈做好了echart的封装native-echarts.cd到你项目目录，然后通过npminstallnative-echarts--save去安装在需要调用的界面importEchartsfrom'native-echarts’可以调用代码与效果图如下：/***SampleReactNativeApp*ht

milk po·2025-03-14 06:35

ReactNative fetch源码分析

原生分析的是安卓端核心代码//react-native/vendor/core/wehatwg-fetch.jsself.fetch=function(input,init){returnnewPromise

郝捷Laxus·2025-03-05 04:20

后端-优秀文章

一个人搞定APP前后端开发使用react-native开发app，使用express开发后端。

weixin_33985507·2025-03-03 10:28

React Native App第三方库

lottie-react-native动画库github以及官网可以用于页面加载时的动画importReact,{FC}from"react";import{SafeAreaView,ScrollView,Text}from"react-native

·2025-02-28 15:22

react-native入门之核心组件与原生组件

文档：核心组件与原生组件·ReactNative中文网1.简介ReactNative是一个使用React和应用平台的原生功能来构建Android和iOS应用的开源框架。可以使用JavaScript来访问移动平台的API，使用React组件来描述UI的外观和行为2.视图在Android和iOS开发中，一个视图是UI的基本组成部分屏幕上的一个小矩形元素、可用于显示文本、图像或响应用户输入。甚至应用程序

crayon-shin-chan·2025-02-27 19:08

react和react-native中redux @reduxjs/toolkit的使用

下面的示例是在react-native中使用yarnaddreact-redux@reduxjs/toolkit一、store中store/module/dict.jsimport{createSlice

九段刀客·2025-02-14 15:14

推荐频道