Skip to content

Latest commit

 

History

History
51 lines (40 loc) · 1.59 KB

README.md

File metadata and controls

51 lines (40 loc) · 1.59 KB

react-native-interactable-button

Interactable button component in React Native.

基于 React Native 开发的可交互的按钮组件。

It solves the conflict between dragging events and clicking events.

解决了拖拽事件与点击事件冲突的问题。

Example 示例

demo

import InteractableButton and use it.

引入InteractableButton并使用。

import InteractableButton from "./components/interactableButton";

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

...

    <InteractableButton
        initialPosition={{x: (SCREEN_WIDTH - 95), y: (SCREEN_HEIGHT - 195)}}
        snapPoints={[
            {x: 10, y: 60},
            {x: 10, y: (SCREEN_HEIGHT - 195)/4},
            {x: 10, y: (SCREEN_HEIGHT - 195)/2},
            {x: 10, y: (SCREEN_HEIGHT - 195)/4*3},
            {x: 10, y: (SCREEN_HEIGHT - 195)},
            {x: (SCREEN_WIDTH - 95), y: 60},
            {x: (SCREEN_WIDTH - 95), y: (SCREEN_HEIGHT - 195)/4},
            {x: (SCREEN_WIDTH - 95), y: (SCREEN_HEIGHT - 195)/2},
            {x: (SCREEN_WIDTH - 95), y: (SCREEN_HEIGHT - 195)/4*3},
            {x: (SCREEN_WIDTH - 95), y: (SCREEN_HEIGHT - 195)},
        ]}
    >
        <View
            style={[styles.childTouch]}
            onPress={() => {alert("Child Touch!")}}
        >
            <Text style={[{color: '#FF0000'}]}>Touch me!</Text>
        </View>
    </InteractableButton>

References 参考文献

@Deevent - Bubble.js