reactjs – 如何使用redux和react-native打开模态
发布时间:2020-12-15 16:19:07 所属栏目:百科 来源:网络整理
导读:试图找出redux.我想从我的家用容器中打开一个模态.我一直在尝试按照一些教程,但我没有看到任何错误,所以我需要一些帮助.我坚持使用模态组件监听或订阅商店.我也需要传递一个有效负载对象. 更新: 试图解决这个问题我意识到,除非我在发送后更改路线,否则目标
试图找出redux.我想从我的家用容器中打开一个模态.我一直在尝试按照一些教程,但我没有看到任何错误,所以我需要一些帮助.我坚持使用模态组件监听或订阅商店.我也需要传递一个有效负载对象.
更新: 试图解决这个问题我意识到,除非我在发送后更改路线,否则目标组件将不会收到任何道具. openRouteSummary(data) { this.props.openRouteSummary(data); this.replaceRoute('subdivisions') } 操作/ type.js export type Action = { type: 'OPEN_DRAWER' } | { type: 'CLOSE_DRAWER' } | { type: 'OPEN_MODAL' } export type Dispatch = (action: Action | ThunkAction | PromiseAction | Array<Action>) => any; export type GetState = () => Object; export type ThunkAction = (dispatch: Dispatch,getState: GetState) => any; export type PromiseAction = Promise<Action>; modal.js import type {Action } from './types'; export const OPEN_MODAL = "OPEN_MODAL"; export function openModal(data): Action { return { type: OPEN_MODAL,payload: data,} } 减速机/ modal.js import type {Action } from '../actions/types'; import { OPEN_MODAL,CLOSE_MODAL} from '../actions/modal'; export type State = { isOpen: boolean,payload: Object } const initialState = { isOpen: false,payload: {} }; export default function (state: State = initialState,action: Action): State { if (action.type === OPEN_MODAL) { return { ...state,payload: action.payload.data,isOpen: true }; } if (action.type === CLOSE_MODAL) { return { ...state,isOpen: false }; } return state; } 容器/ home.js import React,{Component} from 'react'; import {connect} from 'react-redux'; import {openModal} from '../../actions/modal'; import Summary from './../modals/summary'; class Home extends Component { constructor(props) { super(props); openModal(data) { this.props.openModal(data); } render() { return ( <Container theme={theme}> <Content> <Grid> <Row> <Col style={{ padding: 20 }}> <Button transparent onPress={() => this.openModal({ rowData: 'rowData' }) }> <Text> Open Modal </Text> </Button> </Col> </Row> </Grid> </Content> <Summary/> </Container> ) } } function bindAction(dispatch) { return { openModal: (data) => dispatch(openModal(data)) } } export default connect(null,bindAction)(Home); modal.js /* @flow */ 'use strict'; import React,{Component} from 'react'; import {connect} from 'react-redux'; import {openModal} from '../../actions/modal'; import Modal from 'react-native-modalbox'; class Summary extends Component { constructor(props) { super(props); this.state = { model: {} }; } componentDidMount() { } openModal(data) { console.log(data) //this.setState({ model: data }) this.refs.modal.open(); } _close() { this.refs.modal.close(); } render() { return ( <Modal backdropOpacity={.8} style={[styles.modal,{ height: 280,width: 280 }]} ref={"modal"} swipeToClose={false} backdropPressToClose={false}> <Container theme={theme}> <Content padder> <Grid> <Row> <Col style={styles.header}> <Text style={styles.headerText}>Survey Summary</Text> </Col> </Row> </Grid> </Content> </Container> </Modal> ); } } function bindAction(dispatch) { return { openModal: (data) => dispatch(openModal(data)) } } const mapStateToProps = (state) => { return { payload: state.modal.payload } } export default connect(mapStateToProps,bindAction)(Summary); 解决方法
您需要连接Modal.js组件并添加componentWillReceiveProps生命周期方法.在此方法中,您将检查reducer中的openModal属性是否已更改.如果是这样,你需要采取相应的行动(打开/关闭模态),否则就忽略它.
编辑:Modal.js的示例 这就是Modal.js的样子.通过连接我的意思是使用redux的连接方法,你已经做了什么.最后一行有两个动作创建者openModal& closeModal,你需要导入. /* @flow */ 'use strict'; .... class Summary extends Component { ... componentWillReceiveProps(nextProps) { if(nextProps.modalOpen !== this.props.modalOpen) { if (nextProps.modalOpen) { this.openModal(); } else { this.closeModal()M } } } openModal(data) { ... this.refs.modal.open(); } closeModal() { this.refs.modal.close(); } render() { return ( <Modal ref={"modal"} ...> ... </Modal> ); } } const mapStateToProps = (state) => { return { modalOpen: state.modal.isOpen } } export default connect(mapStateToProps,{ openModal,closeModal })(Summary); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |