1.0.3 • Published 4 years ago
floatbox v1.0.3
Installation
$ npm i floatbox
$ npm i --save floatboxProperties
| Prop | Default | Type | Description |
|---|---|---|---|
| originTop | 0 | number | 初始坐标，距离父视图顶部距离 |
| originLeft | 0 | number | 初始坐标，距离父视图左侧距离 |
| touchWidth | - | number | 手势浮动框宽度 |
| touchHeight | - | number | 手势浮动框高度 |
| spaceBottom | 0 | number | 拖动范围，距离屏幕底部的间距 |
| clickAction | - | func | 拖动view点击事件 |
| touchStyle | - | object | 拖动view样式 |
| iconImage | - | node | 拖动view显示img，showImage=true时显示 |
| showImage | false | bool | 拖动view是否是个img |
Example
Usage
import React, {Component} from 'react'
import {
StyleSheet,
View,
} from "react-native"
import TouchView from 'floatbox'
export default class Demo extends Component {
constructor(props) {
super(props)
}
touchClick() {
//点击浮动窗口
}
render() {
return (
<View style={styles.container}>
<TouchView touchWidth={50}
touchHeight={50}
originLeft={10}
originTop={100}
spaceBottom={60}
touchStyle={styles.touchView}
// showImage={true}
// iconImage={require("../../img/home/home_rookie.png")}
clickAction={this.touchClick.bind(this)}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#999999',
},
touchView:{
backgroundColor: 'red',
}
})