reactjs标签_开源鸿蒙跨平台开发者社区

reactjs

【腾讯位置服务开发者征文大赛】腾讯位置服务 + React Native：地图、检索、规划、导航一条龙，附可运行 Demo

摘要：TencentMapDemo是基于react-native-tencent-map-kit的React Native示例工程，演示腾讯地图SDK的集成与功能实现。工程要求macOS环境、Node.js≥20和Yarn1，包含地图样式切换（标准/卫星/夜间）、位置搜索API（POI检索、逆地理编码）、导航与路线规划（驾车/步行/骑行/公交）等功能模块。使用前需在腾讯位置服务控制台配置Key并绑

 weixin_47315004
2026-04-15 10:36:22

 549

 8

#ios #前端 #reactjs +4
Java编程艺术从入门到精通的实践指南

Spring、Hibernate等开源框架的出现，进一步丰富了Java的技术栈，为企业级应用开发提供了完整的解决方案。Java最初被设计为一种面向对象的通用编程语言，其一次编写，到处运行的理念彻底改变了软件开发的方式。从Java 8引入的Lambda表达式和Stream API，到后续版本中加入的模块化系统、模式匹配等特性，Java始终在适应现代软件开发的需求。尽管新兴编程语言不断涌现，Java凭

 YpYTIjKy
2025-10-23 16:40:43

 384

 4

#reactjs
基于React Native鸿蒙跨平台实现在商品评分和用户评价评分场景，支持任意评分值的星级渲染，通过Math.floor(rating)实现半星（整数部分）的精准展示

本文深入分析了一个基于React Native实现的电商商品详情页，从架构设计、技术实现到鸿蒙跨端适配策略。系统采用React Hooks进行轻量级状态管理，通过TypeScript确保类型安全，并实现模块化的状态分离。页面展示完整的商品信息（基本属性、详细描述、规格参数、用户评价）和交互功能（收藏、购物车、购买）。在跨端开发中，使用Base64图标库和Dimensions API解决兼容性问题，

飞羽殇情
2026-01-29 22:37:34

 597

 11

#华为 #react native #harmonyos +1
js实现仿pc端微信查看图片功能

使用react实现类似微信图片查看器的功能，可以切换图片，实现图片的放大、缩小、旋转、平移和下载功能。直接上页面效果图。因为项目需求，使用electron封装成了桌面应用，作为单独的弹窗功能，在页面右上角添加窗口操作按钮。1. 放大/缩小功能，可通过滚轮或点击底部按钮来实现_large(num) {let { scaling } = this.state;scaling = Math.trunc(

小朱葛
2020-05-11 16:03:35

 1634

#reactjs #es6 #javascript
项目构想｜Cursor 图片压缩应用（Electron）

👋，我们通过 Vibe Coding 做一个PC端的图片压缩工具。

CaptainDrake
2025-08-04 15:21:28

 1211

 13

#人工智能 #前端 #reactjs
基于 react + electron 开发及结合爬虫的应用实践

基于 react + electron 开发及结合爬虫的应用实践????前言????一个 electron-react 栗子 ????1️⃣-Demo 安装 react 脚手架2️⃣-Demo 配置 electron 主进程3️⃣-Demo 配置 react-clielectron-react 每日壁纸 ????1️⃣-wallpaper 明确需求2️⃣-wallpaper 功能实现1、elect

weixin_41731727
2021-03-03 09:37:28

 1126

#javascript #爬虫 #reactjs +2
记一次Electron+React的环境搭建

记一次无聊且有趣的Electron+React的环境搭建这两天闲着无聊自己尝试看看教程，做点东西什么的。想到之前看到过JS也可以做桌面应用，于是乎，稍加思索，拿Electron下手试试水。正文以下基于你已经懂得了前端的一些必备开发基础，如node环境，编辑器等已经一应俱全。先上Electron官网文档，在官方文档里我们可以先搭建一个最简单的Electron应用。在这里你可以做一个最...

假的前端
2020-03-29 23:17:54

 1489

 3

#javascript #node.js #reactjs
electron-builder打包环境搭建以及打包过程中的坑

本文档在electron v8.0.0和electron-builder v22.3.2环境下编写，其他版本的环境可能会略有差异1. 全局安装electron-buildernpm install -g electron-builder2. 在package.json文件中增加打包的配置完整配置项文档地址：https://www.electron.build/configurati...

李荔
2020-02-12 09:56:41

 5359

 14

#javascript #node.js #reactjs +1
从零开始开发基于electron的switchHost应用

前言市面上应该有不少切换window下域名映射的应用了，个人感觉这个功能实现起来应该不是很复杂，正好是自己切入electron学习的好机会。electron作为js生态在桌面端的重磅应用，极大地拓展了js的边界(vsCode就是用electron开发的)。最为一个前端开发，补齐桌面端的开发短板也是很有意义的一件事。开发目标实现一个简单的桌面端switch host应用，windows中有一个文件h

广兰路地铁
2020-10-19 10:39:36

 1295

#reactjs #前端
React-Native setState的若干使用方法速记

写作时间：2020年末吧具体时间记不得了开发平台：windowsReact-Native版本：0.63.4目标平台：Android、iOS变量什么时候使用state来维护1、变量如果是通过props从父组件中获取，就不要使用state2、如果这个变量可以通过其他的状态state或者属性props通过数据处理得到，不要使用state3、如果变量在render中没有使用到，那就不是一个state4、变

 隔壁老何
2021-04-28 22:00:52

 597

#javascript #reactjs
2020-08-11

AppRegistry.registerComponent（android开发) 入坑Error: Element type is invalid: expected a string (for built-in components)or a class/function (for composite components) but got: object.You likely forgot t

成語
2020-08-11 17:26:39

 193

#reactjs
H5 图片查看器

H5图片查看器场景最近需求涉及到的图片查看的操作，UI设计了一张图片查看的图，要求点击查看图片并支持左右滑动，由于antd-mobile v2版本没有类似组件，所以通过套娃的方式套一个。套娃结果：UI还是挺满意????????。查看地址依赖antd-mobile@2.3.4预览图我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能

 吃糖的乔巴
2022-01-09 17:38:13

 1627

 3

#reactjs #前端
2021-01-07React-Native之打包发布(Android)

React-Native之打包发布(Android)一,介绍与需求移动端打包发布到应用市场二,发布配置注意：以下所有操作都在win10下进行,React Native版本0.59.5,android-studio版本 3.21,生成签名keytool -genkey -v -keystore app.keystore -alias yingqi -keyalg RSA -keysize 2048

嘿！早安
2021-01-07 13:24:26

 348

#reactjs
React Native 入门实战视频教程（37 个视频）

我这里有视频教程，全部是我自己辛苦录的，有兴趣的可以看下。React Native 入门实战视频教程（37 个视频）从零开始入门学习 React Native 开发，手把手教你写 App 项目#1 React Native 课程介绍 - 免费视频教程#2 搭建 React Native 开发与运行环境跑起来 - 免费视频教程#3 演示在 Android Studio 模拟器中运行 App part

程序员随风
2021-02-03 17:58:33

 5260

#react native #小程序 #reactjs +1
react-native项目快速接入支付宝支付，使用新版本react-native-alipay-payment模块

本文介绍了在React Native项目中快速集成支付宝App支付（v2.0接口）的解决方案。通过使用第三方模块react-native-alipay-payment，开发者无需原生集成即可实现支付功能。主要内容包括：模块安装：通过npm安装依赖权限配置：关键Android权限声明环境切换：沙箱/正式环境API调用支付调用：两种支付方式（基础支付和简化支付）状态管理：自动处理支付状态与错

 m0_70681453
2025-06-21 13:31:07

 839

 5

#react native #reactjs #集成测试
从0开始搭建一个react-native项目

按照官网的步骤如果你没有Brew那么献上一篇文章安装brew安装nodebrew install node安装watchmanbrew install watchman更换镜像源npx nrm use taobao安装yarn包管理工具npm install -g yarn下载Xcode在 Xcode 中安装 iOS 模拟器，安装模拟器只需打开 Xcode > Preferences… 菜单

 丰柏林
2021-05-31 18:05:42

 845

 2

#reactjs #前端
后台展示小程序页面

将taro编写的代码转成h5运行Taro.login()无法使用，Taro.checkSession()无法使用先注释掉，用taro:weapp运行拿到的token写死再存储里，强行跳过授权登录和绑定手机号Taro.getMenuButtonBoundingClientRect()不可用小程序有通过胶囊信息写样式的再h5端要重写Taro.getLocation()不可用小程序通过这个接口请求位置信

 DyuanH
2021-01-22 10:41:49

 1357

#前端 #javascript #reactjs
React Native 中 react-navigation 导航器的使用 [亲测可用]

在React Native中，官方已经推荐使用react-navigation来实现各个界面的跳转和不同板块的切换。react-navigation主要包括三个组件：TabNavigator切换组件，用来实现同一个页面上不同界面的切换，即tab选项卡StackNavigator导航组件，用于实现各个页面之间的跳转，即页面跳转（通过stack栈记录）DrawerNavigator抽屉组件，可以实现

 lllomh
2021-02-01 23:16:17

 1577

#reactjs #javascript #react native
taro + react 如何自定义TabBar 不影响使用switchTab

对于一些具有独特业务逻辑和交互需求的小程序来说，原生 TabBar 可能无法满足复杂多变的场景。比如，某些应用需要在 TabBar 上实时展示动态信息或实现特定的动画效果，而这是原生 TabBar 难以实现的。从品牌塑造和用户体验的角度看，通过自定义 TabBar 可以更好地展现品牌特色，与整个应用的风格达到高度融合，给用户留下更深刻的印象，提升用户对应用的辨识度和黏性。但不可忽视的是，其原始问题

 时长.w
2024-06-18 16:38:48

 1349

 5

#taro #typescript #reactjs
主页（二）-底部菜单布局——TabBar 标签栏 & 编程式导航实现顶部内容变化 & 首页重定向-exact & 引入图标文件替换antd-UI自带图标

主页（二）-底部菜单布局——TabBar 标签栏 & 编程式导航实现顶部内容变化 & 首页重定向-exact&引入图标文件替换antd-UI自带图标底部菜单布局antd菜单布局代码结构分析TabBar 标签栏：https://mobile.ant.design/components/tab-bar-cn/菜单布局需要把默认菜单内容隐藏，因为后续要使用路由的方式进行内容的显示

 viceen
2021-02-16 20:09:16

 1166

#html #reactjs
react-native ios2020开发环境搭建

自学react-native，搭建ios环境踩了不少坑，仅供参考。。。1.安装brew/bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)”2.安装nodebrew install nodenpx nrm use taobao (可选切换淘宝源，快)3.安装yarn （高级版npm

Gaius Julius Octivius
2020-07-01 00:39:34

 332

#javascript #reactjs #ios +1
RN引入第三方库 android-studio 出现版本不兼容问题（迁移至AndroidX）

问题背景（作为一个前端实习生，来到公司一下子就被安排接手项目，这也就算了，关键还是React-native ，主要是这个东西依赖的android studio 让人头疼，今天讲讲遇到的坑，欢迎大佬指教哈小弟，开局一文档,工作全靠度）我要在RN项目中引入第三方库，这里引入的是截屏组件npm install react-native-view-shotreact-native link reac...

Love only wy
2019-12-31 15:22:24

 1810

#前端 #react native #android studio +1
taro红包雨及npm插件发布流程

年底了，各式各样的小程序营销活动也开始了，红包雨效果很常见，本文分享一个基于taro开发微信小程序红包雨！效果图使用方式npm插件安装：npm i redpacketsimport RedPackets from ‘redpackets’<RedPacketsshow={showRedPackets}count={60} />GitHub地址：http...

JJH0901
2020-01-22 17:18:06

 787

#npm #github #reactjs
登录（三）01-表单验证-介绍——antd-mobile & formik & yup

登录-表单验证-介绍——antd-mobile& formik&yup登录-表单验证-介绍表单提交前，需要先进行表单验证，验证通过后再提交表单antd-mobile 组件库的方式。（需要 InputItem 文本输入组件） -> rc-form使用更通用的 formik 或https://github.com/formium/formik，React 中专门用来进行表单处理和

 viceen
2021-05-27 23:44:29

 1107

 1

#reactjs #html
Taro 引入静态资源及路由传参/接参

Taro中引入图片并不像Html那样，直接找到图片的相对路径引入即可！！而是需要通过import引入import one from '../../assets/images/1.png'import two from '../../assets/images/2.png'import three from '../../assets/images/3.png'import four from '

逍康
2020-11-20 13:58:17

 950

#reactjs #前端
Taro小程序踩坑集锦

初始化项目安装完Taro cli之后使用 taro init app-name 创建项目创建项目是会有让开发者选择模板如果不使用云开发 taro-ui为首选如果使用云开发则选择wxcloud注册微信小程序如果想使用云开发，一定要在小程序开发者网站注册小程序有些之前做过小程序的同学但是好久没有写过了你登陆进去就会发现，你的小程序账号被冻结了，被冻结了，被冻结了????，** 那么碰到这个问题

 COLNA
2021-05-18 08:58:11

 1315

#小程序 #reactjs #node.js
Apache Cordova的相关应用

1. 简介使用HTML, CSS & JS进行移动App开发多平台共用一套代码免费开源2. cordova实现沉浸式状态栏安装插件cordova plugin add cordova-plugin-statusbar安装完插件之后，在cordova工程的\platforms\android\app\src\main\java\org\apache\cordova\st...

admin_rdc
2020-02-19 11:18:51

 196

#android #vue.js #reactjs +1
在uniapp和taro中，分别用两种不同的方法实现单选全选。

首先加上checkbox标签`，checkbox标签外包裹checkbox-group标签，checkbox-group标签上有@change属性，可以触发change事件，可以获取value的值。<view class="cartlist"><checkbox-group @change="allselected"><che...

暄和同学
2020-02-23 19:17:24

 1346

#vue.js #reactjs #javascript
Taro3.0 使用Echarts 画折线图和饼图

前言最近项目有数据统计展示的需求，考虑使用echarts，在开发的过程中遇到挺多问题，本文就这开发过程做个小结。环境及工具Taro版本：3.0.7echarts插件：使用了taro物料市场的echarts插件物料地址： https://taro-ext.jd.com/plugin/view/5f648e4c0dd8313026e0942d使用过程安装插件npm i echarts-taro3-re

DyuanH
2020-11-24 17:37:15

 3852

 1

#javascript #reactjs #前端
Taro 项目配置 Dva

准备工作Taro-cli 工具安装使用 npm 安装 clinpm install -g @tarojs/cli使用 yarn 安装 cliyarn global add @tarojs/cli使用 cnpm 安装 clicnpm install -g @tarojs/cli创建项目模板taro init project-name一定要选择默认模板安装配置文...

你个小胖墩儿
2020-03-16 09:21:47

 1164

#javascript #reactjs
Taro引入vant Weapp的方法

Taro中引入Vant Weapp，不能直接通过第三方NPM包的形式直接调用。需下载资源到本地需如下几步：1.在/src/components下新建文件夹vant-weapp2.在github上找到Vant-weapp下载文件包，将对应的dist复制到新建的vant-weapp文件夹下。3.在Pages或components对应文件的config.usingComponents中，...

码农1996
2020-03-04 09:25:28

 7035

 6

#reactjs #javascript
Taro中使用getUserInfo获取信息及授权遇坑

Taro中获取微信用户的信息及授权遇坑文章目录Taro中获取微信用户的信息及授权遇坑Taro文档及小程序文档的翻找以下为尝试内容（并没有成功）总结首先声明这个并不是Taro的坑，而是微信小程序的坑，写篇文章记录一下。背景：由于对taro用的并不是很熟练，导致上手还是对它很不满意的。但是随着深入发现写起来还是很舒服。Taro文档及小程序文档的翻找在Taro的文档中我们可以看到在如图位置找到这个对应接

 家里有蜘蛛
2020-12-27 22:15:54

 5549

 5

#javascript #reactjs #小程序
从零搭建Electron应用的一系列简单的 Demo

Electron 是一个优秀的跨平台桌面应用程序开源库，目前接触 Electron 的开发者也越来越多。但是笔者发现，目前社区里缺少对初学者足够友好的入门教程来帮助初学者用 Electron 搭建一个完整的开发框架。为了解决这个问题，笔者将结合平时的一些 Electron 开发经验，渐近式的带领读者从零开始搭建一个完整的 Electron 应用。在这个教程中，笔者将使用 React 构建渲染进程。

WangYuLue
2020-06-09 23:24:48

 2719

#javascript #reactjs #前端 +1
创建electron-react项目

创建electron-react项目介绍基于Electron实现的软件底层实现背景Electron+Reactreact项目配置Electron介绍首先，我们需要知道什么是Electron。Electron是一个能让你使用传统前端技术（Nodejs，JavaScript，HTML，CSS）开发一个跨平台（Windows，OSX及Linux系统）桌面应用的框架。基于Electron实现的软件Elec

土豆Coder
2020-05-18 14:44:08

 633

#reactjs #前端 #electron
微信小程序、uni-app开发微信小程序、taro开发微信小程序基础知识

微信小程序、uni-app开发微信小程序、taro开发微信小程序基础知识一、基本目录介绍1.微信小程序app.js ------ 小程序逻辑app.json — 小程序公共配置(配页面路由、导航条、选项卡等页面类信息)app.wxss ---- 小程序公共样式表components — 组件目录pages ------- 业务页面文件存放的目录resources ---- 存放...

哼切滚
2020-02-23 23:13:20

 1877

 3

#前端 #vue.js #reactjs +1
强大的移动端表单开发方案 @alitajs/dform(附视频)

强大的移动端表单开发方案 @alitajs/dform强大的移动端表单开发方案 @alitajs/dform一、开发设想二、基础使用三、提效点1、`picker` 组件：2、一行代码配置样式3、不敲一行代码帮你配置 `data` 的JSON数据强大的移动端表单开发方案 @alitajs/dform一、开发设想从事移动端 H5 开发的小伙伴有没有经历过被长表单支配的恐惧？是一个个表单项纯手写实现的吗

 航航
2020-07-02 20:10:42

 1242

 1

#reactjs
第四篇-Next 接入antd 或者 antd-mobile

文章目录1、配置[antd-mobile](https://mobile.ant.design/docs/react/introduce-cn#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)2、按需加载antd-mobile组件1、安装加载css 插件和 babel-plugin-import2、第一种配置按需加载2、第二种配置按需加载1、配置antd-mobil

小糖Sweet
2020-09-28 15:38:43

 3402

#reactjs
Taro（React+TS）基于InnerAudioContext封装一个基本的音频组件（uni-app（vue）后续更新）

为什么要封装一个音频组件主要因为微信小程序官方的audio不维护了，并且在很多iOS真机上确实也存在点击无法播放，总时长不显示等问题.音频组件的要求与限制点击播放或者暂停显示播放进度及总时长通过图标变化显示当前音频所处状态（暂停/播放/加载中）页面音频更新时刷新组件状态全局有且只有一个音频处于播放状态离开页面之后要自动停止播放并销毁音频实例材料：icon_loading.gificon_playi

senar369
2020-07-25 19:18:53

 1146

#reactjs #typescript #微信小程序 +1
ReactNative常见的报错，踩坑

文章目录ReactNative常见的报错，踩坑常见错误点击事件，点击了几次就发生这样的错误使用字体图标时，执行程序发现了这样的报错使用FlatList添加justifyContent出现这样的报错程序不刷新常见警告Debug页面没在焦点状态ReactNative常见的报错，踩坑持续更新中。。。。常见错误点击事件，点击了几次就发生这样的错误Attempted to transition f...

青空–Air
2020-03-11 16:12:46

 3651

#reactjs #react native
React Native入门基础使用总结

1、router: react-native-router-flux基于react-navigation/native 二次封装2、字体图标：react-native-vector-icons（推荐）遇到的问题：React Native CLI uses autolinking for native dependencies, but the following modules are linke

小刘先生liu
2020-12-10 14:28:48

 1326

 2

#react native #reactjs #前端 +1
React-native的新架构

文章主要介绍了，包括以下几个方面的内容：📱✨如何，提升跨平台一致性；分析了，如通信瓶颈、启动慢、维护复杂等；介绍了；可，提升交互效率；讲解了 RN 的；常用基础库（如）的配套使用；和的思路。

溪饱鱼
2025-05-28 17:02:21

 1550

 25

#架构 #reactjs
关于antd-mobile自定义主题

使用create-react-app脚手架构建项目的过程就不说了，详情参考创建React应用。（注意：如果您以前create-react-app通过进行了全局安装npm install -g create-react-app，建议您使用卸载软件包，npm uninstall -g create-react-app以确保npx始终使用最新版本。）导入antd-mobile，参照Ant Desig..

测试号第n天
2020-04-10 09:31:34

 1321

#reactjs
React Native 性能优化指南【全网最全，值得收藏】

原文链接：https://juejin.im/post/5e1676e16fb9a04847095b122020 年谈 React Native，在日新月异的前端圈，可能算比较另类了。文章动笔之前我也犹豫过，但是想到写技术文章又不是赶时髦，啥新潮写啥，所以还是动笔写了这篇 React Native 性能优化的文章。本文谈到的 React Native 性能优化，还没到修改 React Nat...

卤蛋实验室
2020-01-09 10:47:49

 1936

 4

#react native #reactjs #前端 +2
Ant Design Mobile ——TabBar 标签栏的使用

前言对于Ant Design（移动端）TabBar的使用，一直有bug，百度了很多博客，都没找到解决方法，琢磨了一个小时，写下这篇博客，希望对小白有所帮助，不足之处还请指点一二。废话不多说，使用之前，别进行弹射，别进行弹射，别进行弹射，最好是初始化的新项目安装和初始化$ npm install -g create-react-app# 注意：工具会自动初始化一个脚手架并安装 React...

Greenhand_BN
2020-03-05 03:11:38

 6670

 2

#reactjs #前端 #npm
reactNative更新App，自定进度条

reactNative更新App，自定进度条一、下载插件yarn add rn-app-upgrade二、安卓使用import React, {Component} from 'react';import {PermissionsAndroid,Text, View,NativeModules,DeviceEventEmitter,TouchableOpacity} from 'rea...

前端阿皓
2020-03-02 14:54:27

 1728

 3

#reactjs
react-native热更新、自定义弹窗

reactNative热更新自定义弹窗、原生弹窗更新一、安装code-push-clinpm install -g code-push-cli二、注册code-push帐号code-push registerPlease login to Mobile Center in the browser window we've just opened.Enter your token f...

前端阿皓
2020-02-27 14:11:32

 1070

 2

#reactjs