在 React Native 中发布和订阅事件

Question

是否可以发布和订阅事件（如离子）以进行组件通信。我拥有的两个组件没有关联（没有父组件和子组件）。\n一个组件是一个带有按钮 Publish 的标题，另一个组件是一个表单。我想要的是将事件从单击的按钮发送到表单以进行验证，例如字段正文不能为空之类的内容。

\n\n

编辑：\n我正在使用路由器通量。我的表单组件是NewPost，带有按钮发布的组件是ButtonsNewPost。该组件是父组件还是子组件？他们能以某种方式沟通吗？

\n\n

        <Scene\n          key="newPost"\n          component={NewPost}\n          hideNavBar={false}\n          renderRightButton={<ButtonsNewPost/>}\n          navBarButtonColor=\'#fff\'\n        >\n

\n\n

解决方案：

\n\n

newPost.js

\n\n

componentWillReceiveProps(newProps) {\n    let validationMessage;\n    if(newProps.validationBody) {\n        validationMessage = \'El campo descripci\xc3\xb3n es requerido\';\n        this.showToastValidation(validationMessage);\n\n        //without the next line the validation toast only appear once\n        this.props.validation_body(false); \n    } \n\n}\n\nconst mapStateToProps = state => {\n   return {\n    validationBody: state.validationBody\n   }\n}\n\nconst mapDispatchToProps = dispatch => {\n    return {\n        validation_body: (validationBody) => \n               dispatch(validation_body(validationBody))\n    }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(NewPost)\n

\n\n

减速器/validationBody.js

\n\n

export default (state = false, action) => {\n    switch(action.type) {\n        case \'validation_body\':\n            return action.payload\n        default:\n            return state\n    }\n}\n

\n\n

减速器/index.js

\n\n

import validationBody from \'./validationBody\';\n\nexport default combineReducers({\n    validationBody: validationBody\n})\n

\n\n

动作/index.js

\n\n

export const validation_body = (validationBody) => {\n    return {\n        type: \'validation_body\',\n        payload: validationBody\n    }\n}\n

\n\n

按钮NewPost.js

\n\n

if (!window.description) {\n   this.props.validation_body(true);\n   return;\n}\n\nconst mapDispatchToProps = dispatch => {\n    return {\n        validation_body: (validationBody) => \n         dispatch(validation_body(validationBody)),\n    }\n}\n\nexport default connect(null, mapDispatchToProps)(ButtonsNewPost)\n

\n

Answer 1

您可以使用react-native-event-listeners库：

https://github.com/meinto/react-native-event-listeners

用法与 Ionic 事件类似：

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>
)