Question

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

编辑：我正在使用路由器流量。我具有形式的组件是NewPost，具有Button发布的组件是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
    }
}

reducers / 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

用法类似于离子事件：

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

在React Native中发布和订阅事件

1 个答案: