ReactNative propsを利用せずに別クラスから別クラスに値を渡す方法

React Native Event Listeners

#　用途

別クラスから別クラスに値を渡す際に使用

なぜ使用したかったか？

• Aクラスで使用していた変数をBクラスでも使用したい
• 変数１つのためだけに、コンポーネントを呼び出すことはしたくない

使用例

• ボタンを押したら no dataのテキストをit worksに変える処理

import { EventRegister } from 'react-native-event-listeners'

/*
 * RECEIVER COMPONENT
 */
class Receiver extends PureComponent {
    constructor(props) {
        super(props)
        
        this.state = {
            data: 'no data',
        }
    }
    
    componentWillMount() {
        this.listener = EventRegister.addEventListener('myCustomEvent', (data) => {
            this.setState({
                data,
            })
        })
    }
    
    componentWillUnmount() {
        EventRegister.removeEventListener(this.listener)
    }
    
    render() {
        return <Text>{this.state.data}</Text>
    }
}

/*
 * SENDER COMPONENT
 */
const Sender = (props) => (
    <TouchableHighlight
        onPress={() => {
            EventRegister.emit('myCustomEvent', 'it works!!!')
        })
    ><Text>Send Event</Text></TouchableHighlight>
)

まとめ

• EventRegister.emit()と、EventRegister.addEventListener()はセットの関係
• 関数の第一引数はemitとaddEventListennerを繋ぐuniqキー,第二引数はemit→addEventListennerに渡すデータ
• addEventListennerを呼び出した後はremoveEventListennerを呼び出して消す？

参考