是否可以发布和订阅事件(例如离子事件)以进行组件通信。我拥有的两个组件没有关联(没有父母和孩子)。 一个组件是带有按钮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)
答案 0 :(得分:0)
您可以使用 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>
)