Skip to content

qikong233/react-native-floatWindow

Repository files navigation

react-native-floatWindow

纯RN仿微信悬浮窗口

Run this project

  • npm install

  • react-native run-ios OR react-native run-android

USAGE

step 1

npm install react-native-root-siblings

step 2

drag SuspensionWindow floder to your own floder

step 3

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native'
import SuspendScreen from './SuspensionWindow/index'
import RootSibling from 'react-native-root-siblings'

class AppScreen extends Component {
  static navigationOptions = {
    title: '首页'
  }

  onPress = () => {
    if (this.sibling) {
      return
    }
    this.sibling = new RootSibling(<SuspendScreen close={this.close} toFloat />)
  }

  close = () => {
    this.sibling && this.sibling.destroy()
    this.sibling = undefined
  }

  render () {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.onPress}>
          <Text>
            Link
          </Text>
        </TouchableOpacity>
      </View>
    )
  }
}

Props

prop type default
close func null
toFloat bool false

Gif

image

todo

  • 导航栏修改样式
  • 当有nav的时候滑动
  • 更新内容

About

RN仿微信悬浮窗口

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published