由于前段时间写了一个React-Native的项目Mung，里面有一个图片浏览的功能，一般图片浏览都需要放大缩小和左右滑动，后来找了两个这方面比较好的控件react-native-gallery和react-native-image-viewer，但他们都有些问题，要不就卡顿，要不就滑动效果不会，这个其实跟React-Native触摸机制有关系，文章后面会提一下，后面就放弃了放大缩小的功能，实现左
转载
2024-05-11 12:40:49
326阅读
react-native-tab-navigator是一款Tab切换的库，细心的读者可能注意到了对于TabNavigator.Item选项卡部分，代码功能上基本上是重复的，对此，我们能不能对这种有相同功能的代码进行二次封装呢？代码示例主页面封装首先我们可以将功能的部分抽出来。<TabNavigatorItem selected={this.state.selectedTab===ta
原创
2022-09-07 10:09:39
101阅读
1.安装 react-native-tab-navigator 2.页面调用 3.效果图
转载
2018-08-26 10:32:00
162阅读
2评论
在上一篇文章当中，我们学习了react-native-scrollable-tab-view的基本使用方式，包括基本Props的使用介绍等。我们知道官方为我们提供了两种基本的Tab控制器样式，DefaultTabBar和ScrollableTabBar。很多情况下，官方的样式并不能满足我们的需求（备注：官方的样式是文字+下划线的风格），那么此时就需要我们自己来实现特定的样式。 本文要实现这样的
转载
2023-09-18 18:37:20
64阅读
要响应点击事件，需用 TouchableOpacity最左边和最右边的边框圆角实现添加 1 的左外边距，避免边框重合高亮样式在容器和文本上都要添加TouchableOpacity 上也有使用 useCallback 提升性能。
最近搞一个pc端的活动，搞了一个多月，甚烦，因为相比于pc端，更喜欢移动端多一点。因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式，因为tab切换基本上都会用到。当然，你也可以在react当中用jquery或者zepto来实现，不过既然都用react了，能不能用jq,就尽量不用jq。不过不得不吐槽一下，在jquery很简单的东西，在react中稍微复杂化了一
转载
2023-07-14 13:53:40
6阅读
ReactNative开发——滑动组件环境window android react-native 0.45ScrollView介绍ScrollView是一个可以滑动的组件,它内部可以是一个高度不受控制的View,但它自身必须要有个固定的高度。这里如果我们不给直接他设置高度，它的上层空间有固定高度的话也是可以的。<ScrollView> VS <FlatList>我们应该选择
转载
2024-07-30 23:24:55
94阅读
官方为我们提供的Tab控制器有两种：TabBarIOS，仅适用于IOS平台ViewPagerAndroid，仅适用于Android平台（严格来讲并不算，因为我们还需要自己实现Tab） 如果我们需要一个更通用的Tab控制器，那么就要借助开源的力量，本篇文章教你如何使用react-native-scrollable-tab-view，这是官方Demo的效果
demo.gif
转载
2024-02-02 22:19:52
93阅读
原文链接在React Native开发中，官方为我们提供的Tab控制器有两种：TabBarIOS和ViewPagerAndroid。TabBarIOS，仅适用于IOS平台ViewPagerAndroid，仅适用于Android平台（严格来讲并不算，因为我们还需要自己实现Tab）。在项目开发中，我们优先选择一些开源兼容性比较好的第三方库，例如，react-navigation，以及本文即将说到的re
转载
2017-05-26 14:48:17
1845阅读
序言： 年后入职了一家新公司，与前同事交接完之后，发现公司有一个四端的项目（iOS，Android，H5，小程序），iOS和安卓都实现了左滑右滑的效果，而h5和小程序端没实现，询问得知前同事因网上没找到对应的插件相关博客也比较少，加上公司任务比较紧，所以没做就搁置下来了。movable-view来实现，自己尝试来一下发现可行，于是来写这篇博客记录一下，希望能
转载
2024-01-05 21:46:28
134阅读
1.react-navigation安装:安装:npm i react-navigation --save 中文社区:https://reactnative.cn/docs/0.51/navigation.htm
原创
2022-12-16 16:33:23
195阅读
1.创建组件 src/components/CustomTabBar/index.js 2.页面调用 src/pages/MainPage/index.js 3.效果图
转载
2018-08-28 22:36:00
223阅读
2评论
写在前边本文主要介绍如何实现滑动切换及遇到的问题，具体组件代码点这
如果你需要的是轮播图，这里有两个轮子react-slick、nuka-carousel
原生DOM操作，非React框架下也能使用实现效果我们想实现触摸切换无非是做以下三件事监听触摸事件判断用户当前操作是否是切换进行页面切换获取触摸事件如果你不了解触摸事件可以先看触摸事件 要想监听触摸事件整个流程需要监听以下三个事件let lis
转载
2024-01-29 01:42:53
111阅读
1、首先安装好ReactNative的运行环境，安装组件依赖库 2、导入 3、使用 .
转载
2018-08-02 23:25:00
91阅读
2评论
在使用 React Native 开发 iOS 应用时，遇到从右向左滑动返回的问题是比较常见的。这种情况通常会影响用户体验，特别是当应用的使用习惯与 iOS 的默认行为相悖时。本文将详细记录解决该问题的过程，并从备份策略、恢复流程、灾难场景等多个维度进行分析和实践总结。
### 备份策略
为确保开发过程中的数据安全与存储有效，我采用了以下备份策略：
1. **思维导图**：对备份流程进行了整
react监听页面滚动事件：window.addEventListener的scroll无效在react项目中需要通过监听页面滚动高度，控制页面样式动态展示，所以在网上找了以后其他案例发现监听无效，代码如下：//在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理
componentDidMount() {
window.addEventLis
用 react-native 开发一个如下图所示的可滑动翻页的菜单集合： 菜单可以滑动翻页，是不是特别像是轮播图呢？先配置菜单menu.js: export const menus = [
{
name: '用户管理', // 菜单名称
icon: assets.service_user, // 菜单图标
routerName: 'userManage', // 跳转页面
转载
2024-01-03 07:41:48
95阅读
React-Native新架构：ReactNative宣布在2018年宣布对架构进行重要调整，此时正式Flutter面世。(2018.2.27-世界移动大会发布Fluuter)。而React-Native是在2015发布。以下是重构前的React-Native运行方式： 如图所示，RN结构四大核心部分：React代码部分，由代码翻译过来的JavaScript部分，一系列统称为“桥”的部分，以及
转载
2023-11-23 17:32:27
171阅读
作者 | Kureev Alexey 2015 年，React Native 为跨平台移动开发带来了一种声明式组件方法。不久，这种面向组件的理念扩展到了类似的框架。现在，借助 SwiftUI 和 Jetpack Compose，这种声明式方法也可以在 native 平台上实现了。SwiftUI 是一个 UI 框架，它将声明式组件方法引入到包括 iOS，macOS 和 watchOS 在内
转载
2023-11-13 09:17:04
256阅读
一、简言在软件开发中，不论是Web还是App，它们的应用程序都是由很多的功能视图组成的。对于这些组合的视图，如何实现页面间平滑地过渡，应用都有统一的一套跳转机制，这个功能就是路由或者叫导航。应用程序通过导航，可以自由地实现页面之间的切换、前进和后退。在React中使用的是React Router，在iOS中使用的是UIKit的导航视图UINavigation和导航控制器。而在React-Nativ
转载
2024-05-18 22:24:15
197阅读
