学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,但react也不是万能的,在很多场景下滥用反而会适得其反,这里不展开讨论。有了react的实践经验,结合之前自己的一点ios开发经验,决定继续冒险,开始react-native学习和实践,目前主要是从常规的native功能入手,逐步用react-n            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-01-11 21:57:26
                            
                                1024阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            import React from 'react';import {    Text,View,StyleSheet,TouchableOpacity,Animated} from 'react-native';export default clas            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-06-06 18:18:58
                            
                                214阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            500, // 动画持续时间(毫秒)LayoutAnimation.Types.easeInEaseOut, // 动画类型LayoutAnimation.Properties.opacity            
                
         
            
            
            
              代码地址如            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-06-01 00:31:53
                            
                                75阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            1.前言动画是移动应用中的一个相当重要的组成部分,一个用户体验良好的应用通常都具有流畅、有意义的动画。类似原生平台,React Native也为我们提供了丰富的动画API:requestAnimationFrame、LayoutAnimation、Animated。requestAnimationFrame:帧动画,是最容易实现的一种动画,通过不断改变组件的state值,从而在视觉上产生一种动画的            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-02-19 10:44:30
                            
                                128阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            先看效果 这个一个渐渐显示的动画,代码如下 react import React from 'react'; import { Animated, Text, View } from 'react native'; class FadeInView extends React.Component {            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-04-03 14:05:00
                            
                                130阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1.首先推荐一个控件:可以同时实现上拉加载下拉刷新https://github.com/shiwenwen/react-native-swRefresh安装: npm install react-native-swRefresh 使用中有个注意事项,引入的lib有错误(手动找到node_modules/react-native-swRefresh): impo            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-09-16 15:44:55
                            
                                307阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            懒加载:延迟加载,当图片出现在可视区域内,再去进行图片加载,以提升因图片过多引起的加载缓慢的页面加载速度。一、<image>标签loading属性image标签自带一个loading属性,这个属性有2个值eager默认值,渲染时图像立即加载lazy开启懒加载,当滑动到该区域时图像才加载该属性也可以进行懒加载,但是该属性开启的懒加载会加载两到三个可视页面的图片,不止当前可视区域的图片进行            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-08-17 16:22:52
                            
                                389阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            翻译背景:最近我在做 React Native 项目的时候遇到了一个很奇怪的问题:IOS 的 release 包竟然比 debug 包要慢,不管是启动加载还是 tab 切换都慢,而且慢好几秒,这让我很不能理解。做过 React Native 项目的人都会知道,release 包一定会比 debug 包快。通过排查我发现,是引入了本地图片的原因,如果把本地图片改成网络图,加载速度就正常了。我在网上搜            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2024-05-22 19:42:17
                            
                                203阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            在移动开发中,动画能有效的提高用户体验。在 React Native 中,也有相应的 API 供我们做动画。这里着重说一下 Animated 动画库,它可以让我们非常简便的去实现各式各样的动画和交互方式,而且具备很高的性能。Animated 目前只封装了四个可以动画化的组件:View、Text、Image、ScrollView,不过你也可以用 Animated.createAnimatedComponent() 来封装你自己的组件。            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2017-12-15 11:57:56
                            
                                3352阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            在这篇博文中,我将详细说明如何解决“React Native View 的加载流程”在 Android 平台上的问题。借助这个指南,读者将能够理解并优化 React Native View 的加载过程。
## 环境准备
在开始之前,确保您的开发环境符合以下软硬件要求。
### 软硬件要求
|   组件    |          要求           |
|:---------:|:-            
                
         
            
            
            
            作者 | 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阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            React-Native新架构:ReactNative宣布在2018年宣布对架构进行重要调整,此时正式Flutter面世。(2018.2.27-世界移动大会发布Fluuter)。而React-Native是在2015发布。以下是重构前的React-Native运行方式:   如图所示,RN结构四大核心部分:React代码部分,由代码翻译过来的JavaScript部分,一系列统称为“桥”的部分,以及            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-11-23 17:32:27
                            
                                171阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            In this lesson you will learn how create a re-usable component that gives the user the ability to dismiss the keyboard whenever they tap outside of a            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2018-01-15 00:55:00
                            
                                546阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            Learn to install JavaScript modules that include native code. Some React Native modules include native code for Android and/or iOS in addition to Java            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2017-02-16 02:28:00
                            
                                447阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            React Native
RN
 React Native ## React Native 中文文档> 0.59https://reactnative.cn/docs/                
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2016-08-18 22:35:00
                            
                                263阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            React Native尽量阅读官网文档,会有翻译错误和文档内容缺失
android开发react native组件和工具动画Animation/react native写的
开源项目学习            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2019-11-28 23:39:00
                            
                                238阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1.文本内容必须写在<Text中,不能和Html中直接写在页面中。            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2016-10-16 14:04:00
                            
                                337阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            一,新建项目npx react-native init ximalaya --template react-native-template-typescript二,多环境配置在android和ios的开发中,无法使用proscess.env.NODE_ENV的方式区分环境,需要使用一个包来实现: react-native-config 官网地址:https://js.coach/package/r            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2023-09-18 16:10:11
                            
                                317阅读
                            
                                                                             
                 
                
                                
                    