DeviceEventEmitter RN事件派发

A页面

import {DeviceEventEmitter} from 'react-native'

//...
if(***){
    DeviceEventEmitter.emit('eventName',param)
}

B页面

import {DeviceEventEmitter} from 'react-native'

// ...

componentDidMount(){
    this.event = DeviceEventEmitter.addListener('eventName',function)
}

componentWillUnmount(){
    this.event.remove()
}

 

React Native 提供了一套丰富的组件库和原生 API 的桥梁,使得开发者可以在 JavaScript 中处理 Android 和 iOS 平台的手势事件。要监听手势事件,你可以使用内置的 `GestureHandler` 组件。以下是基本步骤: 1. 首先,安装所需的依赖项: ```bash npm install @react-native-community/gesture-handler react-native link @react-native-community/gesture-handler ``` 2. 在你的组件中导入必要的模块: ```javascript import { PanGestureHandler, TapGestureHandler } from '@react-native-community/gesture-handler'; import { View } from 'react-native'; ``` 3. 创建手势处理器并绑定到组件: ```javascript const panGesture = useRef(new PanGestureHandler()).current; const tapGesture = useRef(new TapGestureHandler()).current; useEffect(() => { panGesture.addEventListener('pan', handlePan); tapGesture.addEventListener('tap', handleTap); return () => { panGesture.removeEventListener('pan', handlePan); tapGesture.removeEventListener('tap', handleTap); }; }, []); // 定义处理函数 const handlePan = (event) => { console.log('Pan gesture:', event.nativeEvent); }; const handleTap = () => { console.log('Tap gesture detected'); }; return ( <View> {/* Your view where you want to apply the gestures */} <PanGestureHandler onGestureEvent={handlePan}> <View style={{ height: 100, width: 100, backgroundColor: 'blue' }} /> </PanGestureHandler> <TapGestureHandler onGestureEvent={handleTap}> <Text>Tap me</Text> </TapGestureHandler> </View> ); ``` 4. 根据需要,你可以使用其他手势处理器如 `PinchGestureHandler`、`RotationGestureHandler` 等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值