react-native-root-siblings 在应用的根元素之后添加兄弟元素

2024-04-01 05:54:46

react-native-root-siblings

引用依赖
react-native>=0.62
4.x 版本及react-native低于0.62
3.x 版本

npm: https://www.npmjs.com/package/react-native-root-siblings

作用：

作用是程序根元素之后添加同级元素。创建的兄弟元素位于应用程序元素的其余部分之上。这可以用来创建一个Modal组件或什么东西在应用程序中。

理解：

当你想用自定义的全局全屏的Modal的时候就有用了。在React中有 Portal 可以实现，很多开源框架如 Ant design 的Modal也是这样实现的。但是RN没有DOM节点的概念，而且根组件是在 registerComponent 中注入的，只会注册这一次作为应用的根视图。
因此 react-native-root-siblings 的作者想了一个办法，创建一个容器同时将你自定义的Modal以及根组件同时以同层级的方式放入容器中，并通过 setWrapperComponentProvider 方法告诉RN，使用该容器代替项目中的根组件(App.js)。
这样开发者就可以在任意位置触发全局的Modal了。

引用依赖

npm install react-native-root-siblings --save

react-native>=0.62

例子
在app.js中引入

// in your entry file like `App.js`
import { RootSiblingParent } from 'react-native-root-siblings';// in your render function
return (<RootSiblingParent>  // 在里面使用路由根组件<Route /><App /></RootSiblingParent>
);

4.x 版本及react-native低于0.62

从4.0开始，默认情况下不启用Redux存储上下文注入，应该由上下文包装器设置redux存储上下文。

需要在app.js入口文件中配置

import { RootSiblingPortal, setSiblingWrapper  } from 'react-native-root-siblings';
import { Provider } from 'react-redux';// 在RootSiblings中使用redux上下文之前调用setSiblingWrapper
setSiblingWrapper((sibling) => <Provider store={store}>{sibling}</Provider>);class extends Component {render() {return (<RootSiblingPortal><View/></RootSiblingPortal>)}
}

3.x 版本

1、创建一个兄弟元素

let rootSibling = new RootSiblings(<View><Text>rootSibling兄弟元素</Text></View>);

2、更新创建的元素的内容

rootSibling.update(<View><Text>rootSibling兄弟元素已更新</Text></View>);

3、销毁

rootSibling.destroy();

react-native-root-siblings 在应用的根元素之后添加兄弟元素相关推荐

Thinking -- CSS从根解决选择前一个兄弟元素
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想. 开发中遇到这样一个诉求:特定class的元素单独占一行,现需要针对其前一个兄弟元素增加相应标识,以使其占据所在行的剩余所有空间. ...
一文学会React Native（保姆级教程）持续更新
React Native 官网如果react基础有些遗忘,可以打开React官网查看介绍 React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用 ...
Android方法调用实体类的值,React Native调用Android原生方法和传值
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 创建react native 项目:react-native init callAndroidProject cd ca ...
使用 Agora SDK 开发 React Native 视频通话 App
在 React Native 的应用中,从头开始添加视频通话功能是很复杂的.要保证低延迟.负载平衡,还要注意管理用户事件状态,非常繁琐.除此之外,还必须保证跨平台的兼容性. 当然有个简单的方法可以做到 ...
React Native新组件之SwipeableFlatList
做过移动开发的同学都应该清楚,侧滑删除是移动开发中的一个常见功能.在官方没提供侧滑组件之前,要实现侧滑效果需要使用第三方库,如react-native-swipe-list-view.不过随着Reac ...
React Native JSBundle拆包之原理篇
概述 RN作为一款非常优秀的移动端跨平台开发框架,在近几年得到众多开发者的认可.纵观现在接入RN的大厂,如qq音乐.菜鸟.去哪儿,无疑不是将RN作为重点技术栈进行研发. 不过,熟悉RN的开发者也知道, ...
大咖说：React Native 全埋点实现原理（内附赠书）
本文主要介绍如何实现 React Native 的全埋点,主要是控件点击 $AppClick 事件.该内容,会默认你有一定的 React Native 开发经验,(若没有,也可参与文末赠书). ■ 作 ...
React Native UI渲染流程分析（Android）
前言 React Native App(后称RN App)的UI由JS端的View tree构成,在App运行时会创建相应的原生View tree.从结果看,这和安卓原生开发时用xml布局文件是一样的 ...
react native 研究
一､React Native所做的工作 1)更新DOM 只更新不读取. 2)响应事件响应事件,状态变化,告知渲染. 二､React Native的优点与缺点 1､优点: 1)最后生成原生应用,交互和 ...
我如何为我的第一个自由客户构建第一个React Native应用程序
by Charlie Jeppsson 查理·杰普森(Charlie Jeppsson) 我如何为我的第一个自由客户构建第一个React Native应用程序 (How I built my firs ...

最新文章

热门文章