Witam,
próbuję utworzyć komunnikację w aplikacji poprzez redux'owy state, ale napotykam na problemy. Chcę wyświetlić modala korzystając ze state'a reduxa.
Mam zdefiniowane akcje:
export function toggle() {
return {
type: 'MODAL_TOGGLE',
};
}
export function open() {
return {
type: 'MODAL_OPEN',
};
}
export function close() {
return {
type: 'MODAL_CLOSE',
};
}
Container:
import { connect } from 'react-redux';
import * as ModalActions from '@redux/modals/actions';
import FindHelpModalRender from './FindHelpModalView';
const mapStateToProps = state => ({
isOpen: state.isOpen
});
const mapDispatchToProps = {
toggleModal: ModalActions.toggle,
openModal: ModalActions.open,
closeModal: ModalActions.close
};
exports.FindHelpModal = connect(mapStateToProps, mapDispatchToProps)(FindHelpModalRender);
View:
import React, {Component, PropTypes} from 'react';
import {Text, StyleSheet, View, TouchableOpacity} from 'react-native';
import Modal from 'react-native-modal';
import CloseButton from '@components/ui/CloseButton';
class FindHelpModalView extends Component {
static componentName = 'FindHelpModalView';
static propTypes = {
isOpen: PropTypes.bool,
};
static defaultProps = {
isOpen: false
};
constructor(props)
{
super(props);
this.state = {isModalVisible: this.props.isOpen};
}
_showModal = () => this.setState({isModalVisible: true});
_hideModal = () => this.setState({isModalVisible: false});
render()
{
const { isOpen } = this.props;
return (
<View>
<Modal isVisible={isOpen}>
<View style={styles.content}>
<View style={styles.wrapper}>
<View style={styles.backgroundButton}>
<CloseButton hideModal={this._hideModal.bind(this)}/>
</View>
<View style={styles.backgroundText}>
<Text style={styles.text}>Whoops, that zip code doesn't
look quite right</Text>
</View>
</View>
</View>
</Modal>
</View>
)
}
}
const styles = StyleSheet.create({
...
}
});
export default FindHelpModalView;
i z pozomu tego komponentu chcę wyświetlić tego modala:
import {StyleSheet, View, Text, Image, TextInput, TouchableHighlight} from 'react-native';
import React, {Component, PropTypes} from 'react';
import {AppStyles, AppSizes, AppFonts, AppColors} from '@theme/';
import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux';
import Modal from '@containers/FindHelp/modalView/FindHelpModalContainer';
import * as ModalActions from '@redux/modals/actions';
const mapStateToProps = state => ({
modalIsOpen: state.isOpen,
});
const mapDispatchToProps = {
toggleModal: ModalActions.toggle,
openModal: ModalActions.open,
closeModal: ModalActions.close,
};
const styles = StyleSheet.create({
...
});
class FindHelp extends Component {
static componentName = 'FindHelp';
constructor(props)
{
super(props);
this.state = { text: 'Enter Zip Code'};
FindHelp.propTypes = {
modalIsOpen: PropTypes.func.isRequired,
};
this.checkZipCode = () => {
this.props.openModal();
}
}
render()
{
return (
<LinearGradient {...AppStyles.gradientStyle} style={[styles.background]}>
<Modal />
<View style={[styles.wrapper]}>
<Text style={[styles.textHead]}>FIND HELP</Text>
<Text style={[styles.description]}>Mental health conditions are real, common and treatable.
Enter your zip code below to find the nearest help today.
</Text>
<TextInput
style={[styles.textInput]}
onChangeText={(text) => this.setState({text})}
placeholder={this.state.text}
placeholderTextColor={AppColors.aquamarine}
maxLength={5}
keyboardType={'numeric'}
underlineColorAndroid='rgba(0,0,0,0)'
/>
<TouchableHighlight
style={styles.submit}
onPress={() => this.checkZipCode()}
underlayColor='#fff'>
<Text style={[styles.submitText]}>SEARCH</Text>
</TouchableHighlight>
</View>
</LinearGradient>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(FindHelp);
pierwsze co to mam type is invalid -- expected a stringbut got object 'FindHelp'
a i na pewno coś innego pomieszałem. Właśnie coś mam problem ze zrozumieniem tego redxa, może ktoś będze wiedział gdzie jest błąd i jak to wyprostować?
React