javascript - 在 React Native 中发布和订阅事件

Question

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

编辑:我正在使用路由器通量。我的表单组件是NewPost，带有按钮发布的组件是ButtonsNewPost。该组件是父组件还是子组件？他们可以以某种方式进行交流吗？

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

解决方案:

newPost.js

componentWillReceiveProps(newProps) {
    let validationMessage;
    if(newProps.validationBody) {
        validationMessage = 'El campo descripción es requerido';
        this.showToastValidation(validationMessage);

        //without the next line the validation toast only appear once
        this.props.validation_body(false); 
    } 

}

const mapStateToProps = state => {
   return {
    validationBody: state.validationBody
   }
}

const mapDispatchToProps = dispatch => {
    return {
        validation_body: (validationBody) => 
               dispatch(validation_body(validationBody))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(NewPost)

reducers/validationBody.js

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

reducer /index.js

import validationBody from './validationBody';

export default combineReducers({
    validationBody: validationBody
})

actions/index.js

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

buttonsNewPost.js

if (!window.description) {
   this.props.validation_body(true);
   return;
}

const mapDispatchToProps = dispatch => {
    return {
        validation_body: (validationBody) => 
         dispatch(validation_body(validationBody)),
    }
}

export default connect(null, mapDispatchToProps)(ButtonsNewPost)

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