react-native

2 阅读4分钟

rn优势

绝大部分代码同时适用IOS/Android,一套代码两套系统适用 js 上手 组件化开发 代码更改后自动刷新 热更新

Virtual DOM?React Native 中使用 Virtual DOM 吗?

react 中不要虚拟DOM 而是使用原生组件来渲染用户界面

路由和导航

React-Navigation

stack 导航

RN中是没有web端的history对象的,在使用路由之前需要将组件先声明在Stack中 `js <Stack.Screen name="Home" component={HomeScreen}>

image.png

`

RN 组件封装 首先在封装组件时,我们需要考虑这个组件到底是写成函数式组件,还是组件。如果,说这个组件内部不需要向后端发起API请求,那么我一般是写成函数式的。这样代码更加简介,同时从性能上来说也更加的高效。在实际开发过程中我有基于社区的react-native-video封装视频播放组件;有基于react-native-image-core-pick封装图片选择、视频选择组件。并在视频选择的组件的android端,从Android原生底层基于FFmpegKit,实现了对选择的视频进行压缩的功能。为什么在Android端需要自己去从底层开始实现视频压缩呢?因为,社区开源的视频压缩组件react-native-video-processin在Android端好像是有bug。

React Native 中Redux有什么用?

redux 提供了全局的状态管理,通过使用redux可以很方便的在多个页面间共享数据。主要有由3个部分组成:action、reducers、store。在页面中通过引入react-redux'中的connectredux中的bindActionCreators将state和编写的函数绑定到页面中,方便调用。

FlatList和ScrollView的区别

FlatList和ScrollView其实最大的区别就是在渲染上的区别。ScrollView会一次性的把所有内容全部渲染出来,而FlatList会惰性渲染子元素,只在它们将要出现在屏幕中时开始渲染。他们都是基于VirtualizedList的一个封装。

StyleSheet.create

是普通对象 写错了可以代码提示 React Native 使用样式表来计算和应用最终的样式,并使用原生渲染引擎将其转换为相应的平台特定样式

RN 状态管理

如 Redux、MobX 和 React Context 等。

RN 动画

React Native 提供了内置的动画 API,可以用于创建各种动画效果。您可以使用 Animated 组件和相关的动画函数(如 Animated.timingAnimated.spring 等)来创建平移、旋转、缩放等动画。此外,还可以使用第三方库(如 React Native Reanimated 或 Lottie)来实现更复杂的动画效果。

React Native如何实现异步存储

Async Storage 是一个 React Native 社区维护的模块,它提供了一个异步的、未加密的键值对存储。 它本质上是 React Native 的基于 Web 的本地存储版本。当我们需要存储全局应用程序范围的变量、持久的 GraphQL 或 Redux 状态或我们希望在用户关闭应用程序后保留的其他非敏感数据时,异步存储非常有用。

因为异步存储只能存储字符串数据,所以对象数据必须先序列化后才能存储。此外,我们不应该在异步存储中存储敏感数据,例如令牌或大量数据。

简单介绍下Bundle 加载机制

在编写业务逻辑的时候,我们会有许多个js文件,打包的时候RN会将这些个js文件打包成一个叫index.android.bundle(ios的是index.ios.bundle)的文件,所有的js代码(包括rn源代码、第三方库、业务逻辑代码)都在这一个文件里,启动App时会第一时间加载bundle文件,所以脚本热更新要做的事情就是替换掉这个bundle文件。

RN生命周期?哪些能setState?

挂载

constructor 组件的构造函数 组创建调用 getDerivedStateFromProps render渲染组件状态props componentDidMount 组件挂载完成 初始化操作

更新

  • static getDerivedStateFromProps:在接收到新的 props 时调用。
  • shouldComponentUpdate:在组件更新前调用,用于决定是否需要重新渲染组件。
  • render:根据组件的状态和 props 渲染界面。
  • componentDidUpdate:组件更新完成后调用,可以进行一些更新后的操作。

卸载阶段

  • componentWillUnmount:组件卸载前调用,可以进行清理操作,如取消网络请求、取消订阅等

React Native 中的类组件还可以使用 setState 方法来更新组件的状态。setState 方法是异步的,它接受一个新的状态对象或一个函数,并将新的状态合并到组件的当前状态中。当状态更新后,React 会自动重新渲染组件。

适配怎么做的

flex 布局 + 百分比

const screenWidth = Dimensions.get("window").width;

React Native 提供了 Dimensions API,可以获取当前设备的屏幕尺寸。