react native 中文网 react-native
各位老铁们好，相信很多人对react native 中文网都不是特别的了解，因此呢，今天就来为大家分享下关于react native 中文网以及react-native的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！
为什么说现在reactnative凉了
跨端技术领域中，React Native曾是跨平台项目开发的热门选择。然而，随着技术的迭代与变迁，部分开发者开始质疑其发展前景，担忧其是否“凉了”。事实上，评估一项技术是否“凉”并非一成不变，而是需要结合业务需求、团队能力与技术演进多方面因素进行综合考量。
React Native基于React框架理念，实现了数据与视图的分离，通过虚拟节点映射至原生平台，实现了跨平台应用的高效开发。然而，技术并非完美无缺，React Native面临的问题主要包括数据通信的异步性，以及部分组件与API的平台一致性问题，这在一定程度上增加了开发者的工作负担。
社区内的讨论与实践显示，虽然存在对React Native的疑虑，但也有团队通过持续优化与创新，如携程的CRN和美团的MRN，将React Native的跨端优势进一步发挥，同时兼顾性能提升与平台差异的抹平。这些实践表明，React Native并非一无是处，而是需要通过改进与适应以应对技术挑战。
为解决React Native面临的挑战，技术架构的革新正在进行中，新架构通过引入基于JavaScript Interface(JSI)的新Bridge方案，实现更高效的组件渲染与交互处理，减少异步通信带来的性能损耗，提升应用启动速度。此外，通过优化数据通信路径与增强与原生平台的直接交互能力，新架构在提升性能的同时，也为开发者提供了更加灵活与高效的工作环境。
对比之下，Flutter以其高性能的渲染引擎与跨平台组件集合，展现出与其他主流跨平台方案不同的技术优势。尽管Flutter具备更底层的技术架构，能够实现真正的跨端开发，但也面临生态构建、学习成本高等挑战。选择React Native或Flutter，应基于项目需求、团队能力与技术发展趋势综合考虑。
综上所述，评估React Native是否“凉了”不应仅凭单一指标，而是需要结合技术演进、项目特点与团队实力进行综合判断。跨端开发领域充满机遇与挑战，开发者应保持开放与创新的态度，以适应技术的不断进步。
react-native的常用组件及api
可用于flex布局使用
必须把文本节点放到Text中，否则会报错，Text组件内的子组件不支持flex布局
Android是不支持 GIF和 WebP格式,你需要在android/app/build.gradle文件中根据需要手动添加
网络和 base64数据的图片需要手动指定尺寸
在安卓中，如果使用图片大小远大于Image的图片会触发内存泄漏，只需要设置 Image组件的 resizeMethod属性为 resize即可
提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等
能够配置出类似textarea、password，其他的多选、单选、下拉框等input类型需要引入第三方插件
ScrollView实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）
一般来说我们会给 ScrollView设置flex: 1以使其自动填充父容器的空余空间
Virtualized List放在 ScrollView中，ScrollView是要全部渲染的，那么 Virtualized List就计算不出来哪些 Cell目前显示在屏幕上，会渲染所有的 Cell，那么它的优势就显现不出来了会报警告，所以尽量不要用ScrollView嵌套FlatList和SectionList
解释为什么不能嵌套
ScrollView作为FlatList的父组件的时候，实现上拉加载更多使用onEndReached会无限加载，可以在ScrollView上监听onscroll事件触发加载更多或者不再用ScrollView把ScrollView中的其他内容放到FlatList的ListHeaderComponent属性中。相见下方FlatList介绍使用。
一般使用 TouchableHighlight或者 TouchableOpacity代替
主要针对刘海屏，使用SafeAreaView包裹后，不会在刘海位置渲染页面，以免信息展示不全。
ScrollView的contentInsetAdjustmentBehavior="automatic"也有同样作用,但是滚动时会失效
如何评价 React Native
React native充分利用了Facebook的现有轮子，是一个很优秀的集成作品，并且我相信这个团队对前端的了解很深刻，否则不可能让Native code「退居二线」。
对应到前端开发，整个系统结构是这样：
JSX vs HTML
CSS-layout vs css
ECMAScript 6 vs ECMAScript 5
React native View vs DOM
无需编译，我在第一次编译了ipa装好以后，就再也没更新过app，只要更新云端的js代码，reload一下，整个界面就全变了。
多数布局代码都是JSX，所有Native组件都是标签化的，这对于前端程序员来说，降低了不少学习成本，也大大减少了代码量。不信你可以看看JSX编译后的代码。
复用React系统，也减少了一定学习和开发成本，更重要的是利用了React里面的分层和diff机制。js层传给Native层的是一个diff后的json，然后由Native将这个数据映射成真正的布局视图。
css-layout也是点睛之笔，前端可以继续用熟悉的类css方式来编写布局，通过这个工具转换成constrain布局。
系
统只有js-objc的单向调用，就是把原生UI组件的方法通过javascritcore或者webview（低版本iOS）映射到js中来，整个调用
过程是异步的，这样的设计令React native可以让js运行在桌面chrome中，通过websocket连接Native
code和桌面chrome，极大地方便了调试。对其中的机制Bang的一篇文章写得很详细，我就不拾人牙慧了：React Native通信机制详解« bang’s blog。但这样设计也会带来一些问题，后面说。
点按操作也被抽象成了一组组件（TouchableXXX），这种抽象方式是我在之前做类似工作中没有想到的。facebook还列出Native为什么和web「手感」不同的原因：实时的点按反馈和取消能力。React Native这套相应机制设计得很完善，能像Native code那样控制整个点按操作的所有过程。
Debug
相当方便！修改了js以后，通过内建的nodejs
watcher编译成bundle，在模拟器里面按cmd+r就可以看到效果。而且按cmd+d，可以打开一个chrome窗口，所有的js都移到了
chrome里面运行，所以什么断点单步打调用栈，都不在话下。
上面的既是特点也是优点，下面说说缺点，或者应该说：「仍然遗留的问题」，在我看来，这个方案已经超越了Hybird方案。
系
统仍然（不得不）依赖原生组件暴露出来的组件和方法。举两个例子，ScrollView这个组件，在Native层是有大量事件
的，scrollViewWillBeginDragging，
scrollViewWillEndDragging，scrollViewDidEndDragging等等，这些事件在现有的版本都没有暴露，基本上
做不了组件联动效果。另外，这个版本中有大量组件是iOS
only的：ActivityIndicatorIOS、DatePickerIOS、NavigatorIOS、PickerIOS、
SliderIOS、SwitchIOS、TabBarIOS、AlertIOS、AppStateIOS、LinkingIOS、
PushNotificationIOS、StatusBarIOS、VibrationIOS，反过来看，剩余的都是一些抽象程度极强的基本组件。这
样，用户必须在不同的平台下写两套代码，而且所有能力仍然强烈依赖 React native开发人员暴露的接口。
由于最外层是
React，初次学习成本高，不像往常的Hybird方案，只要多学几个JS
API就可以开始干活了。当然，React的确让后续开发变得简单了一些，这么一套外来的（基于iOS）、残缺不全的（css-layout）在
React的包装下，的确显得不那么面目可憎了。
另外，React Native仍然很不完善。文档还不全，我基本上是看着他的示例代码完成的demo，集成到已有app的文档也是今天才出来。按照官方的说法，Android版本要到半年后才发布：Blog| React，届时整个系统设计可能还会有很大的变化。
PS，在使用Tabbar的时候，我惊喜的发现他们居然用了iconfont方案，我现在手头的项目中也有同样的实现，不过API怎么设计一直很头疼。结果，我发现他是这么写的：
<TabBarItemIOS
name="blueTab"
icon={_ix_DEPRECATED('favorites')}
....>
在 _ix_DEPRECATED的定义处，有一句注释：// TODO(nicklockwood): How can this fit our require system?
以上。
下面是一周前，在React native还没开源的时候，通过反解ipa的一些分析过程，有兴趣的可以看看。
------------------------简单粗暴的分割线--------------------
背景和调研手段
React
Native还没开源，最近和组里兄弟「反编译」了Facebook Group（这个应用是用React
Native实现的）的ipa代码，出来几百个JS文件，格式化一下，花了几天时间读了一下源码，对React
Native的内部核心机制算是有了一个基本了解。
React Native的核心实现：
先简单说几点，详细的等回头更新。
1. React Native里面没有webview，这货不是Hybrid app，里面执行JS是用的
JavascriptCore。
2.再说React Native的核心，iOS Native code提供了十来个最基本核心的类（RCTDeviceEventEmitter、
RCTRenderingPerf等）、或组件（RCTView、RCTTextField、RCTTextView、
RCTModalFullscreenView等），然后由React Native的JS部分，组成二十来个基本组件（Popover、Listview等），交由上层的业务方来使用（THGroupView）。
3.就如他们在宣传时所说，他们实现了一套类似css的子集，用来解决样式问题，相当复杂和强大，靠这个才能将Native的核心组件组成JS层的基本组件再组成业务端的业务组件，应该是采用facebook/css-layout· GitHub的C语言版本实现的（在ppt中我们看到了类似flex-direction: column一类的代码，这个正是css-layout支持的语法）。
4.在React Native中，写JS的工程师解决的是「将基本组件拼装成可用的React组件」的问题，写Native Code的工程师解决的是「提供核心组件，提供足够的扩展性、灵活性和性能」的问题。
React Native的设计考虑：
ReactJS对React Native有着直接的影响（我没在生产环境中用过React，只看过代码&用过Angular，如果有误请指出）
ReactJS里面有这样的设计：
1. ReactJS的大工厂入口createElement返回的不是某个实体DOM对象，而只是一个数组
2.通过源码中 ui/browser/目录中的代码，将这个数组转换成DOM
3.底层的渲染核心是可以更换的
另外，Facebook自己有JSX，css-layout等开源项目，基于这些，如果要做一个用 JS来开发Native app的东西，很自然就想到了一套最有效率的搞法：
1.将 ui/browser里面的代码替换成一套 Native的桥接JS（实际上，iOS版是通过
injectGenericComponentClass方法，将核心组件的方法注入到JS里面），就直接复用React的MVVM，自动将数据映射到Native了
2.
Native
code里面实现三组核心API，一组提供核心组件的API（create、update、delete），一组事件方法（ReactJS里面的
EventEmitter），一组对css进行解析（css-layout）以及返回Style的ComputedStyle（React
Native里面叫meatureStyle）。
这样，用上了ReactJS本身的所有核心功能和设计思路，Native的开发也足够简单。
那，React Native是什么？
其实这东西从Native开发来说，相当于重新发明了一个浏览器渲染引擎并且套一个React的壳，从Web开发角度来说，就是把原来React的后端换成了Native code来实现，就跟Flipboard最近搞的React Canvas一样： Flipboard· GitHubreact-canvas
React Native的优势和劣势：：
优势相对Hybird app或者Webapp：
1.不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题
2.有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用
3.可以直接使用Native原生的「牛逼」动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。
优势相对于Native app：
1.可以通过更新远端JS，直接更新app，不过这快成为各家大型Native app的标配了…
劣势：
1.扩展性仍然远远不如web，也远远不如直接写Native code（这个不用废话解释了吧）
2.
从Native到Web，要做很多概念转换，势必造成双方都要妥协。比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样
式再转换成native原生的表达方式（比如iOS的Constraint\origin\Center等属性），再比如动画。另外，若Android和
iOS都要做相同的封装，概念转换就更复杂了。
更新1：添加了React对React Native的影响。
更新2：基本确定其使用了 css-layout，添加了对React Native的总结
更新3: React native已经开源了： React Native，只有iOS版。我写了几个demo，简单看了看objc代码并和开源前的我们的一些结论（见后文）交叉验证。简单地从前端工程师和系统整体角度说一下React native的特点和优劣吧。
更新4:补充了几条优势和与前端开发的对照
react native 中文网和react-native的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！