portal 类React.createPortal

实现类似React.createPortal的效果

使用说明

安装

@qnpm/q-portal 已经迁移至@qnpm/qportal ，使用方式不变，旧组件将不再维护更新，注意替换

npm install @qnpm/qportal --save --registry=http://npmrepo.corp.qunar.com

基本用法

  1. 在项目根组件外部包裹容器组件
import React from 'react';
import { ScrollView, View, Text, StyleSheet } from 'react-native';
import { Provider } from '@qnpm/qportal';
export default class ExampleRender extends QView<any, any> {
    render() {
        return (
            <Provider>
                <View style={{ flex: 1, paddingBottom: 33 }}>
                    <Text></Text>
                </View>
            </Provider>
        );
    }
}
  1. 在需要使用的地方，使用Portal组件包裹需要渲染在根目录下的组件
import React from 'react';
import { ScrollView, View, Text, StyleSheet } from 'react-native';
import { Portal } from '@qnpm/qportal';

export default class QPopupLayer extends React.component {
    render() {
        return (
            <Portal>
                <View>我是一个小弹层</View>
            </Portal>
        )
    }
}
PopupLayer
QTextInput