82 lines
2.2 KiB
JavaScript
82 lines
2.2 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { PropTypes } from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import { bindActionCreators } from 'redux';
|
|
import { ActionCreators } from '../actions';
|
|
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableHighlight,
|
|
} from 'react-native';
|
|
|
|
class AppContainer extends Component {
|
|
|
|
changeActiveScreen() {
|
|
let screens = ['Home', 'About', 'Contact', 'Portfolio', 'News'];
|
|
this.props.setScreen(screens[(Math.random() * screens.length) | 0]);
|
|
}
|
|
|
|
changeCurrentPost() {
|
|
let posts = ['Post 1', 'Post 2', 'Post 3', 'Post 4', 'Post 5', 'Post 6'];
|
|
this.props.setPost(posts[(Math.random() * posts.length) | 0]);
|
|
}
|
|
|
|
render() {
|
|
let activeScreen = this.props.activeScreen;
|
|
let currentPost = this.props.currentPost;
|
|
return (
|
|
<View style={styles.wrapper}>
|
|
<Text style={styles.welcomeText}>Hello World</Text>
|
|
<Text style={styles.subHead}>The active screen is: {activeScreen.state}</Text>
|
|
<Text style={styles.subHead}>The current post is: {currentPost.state}</Text>
|
|
<TouchableHighlight style={styles.button} onPress={ () => { this.changeActiveScreen() } }>
|
|
<Text style={styles.buttonText}>Change Active Screen State</Text>
|
|
</TouchableHighlight>
|
|
|
|
<TouchableHighlight style={styles.button} onPress={ () => { this.changeCurrentPost() } }>
|
|
<Text style={styles.buttonText}>Change Current Post State</Text>
|
|
</TouchableHighlight>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
wrapper: {
|
|
display: 'flex',
|
|
padding: 50,
|
|
},
|
|
button: {
|
|
backgroundColor: 'green',
|
|
marginBottom: 10,
|
|
padding: 10,
|
|
},
|
|
buttonText: {
|
|
color: 'white',
|
|
textAlign: 'center',
|
|
},
|
|
welcomeText: {
|
|
marginBottom: 30,
|
|
fontSize: 40,
|
|
textAlign: 'center',
|
|
},
|
|
subHead: {
|
|
textAlign: 'center',
|
|
marginBottom: 10
|
|
}
|
|
});
|
|
|
|
function mapDispatchToProps(dispatch) {
|
|
return bindActionCreators(ActionCreators, dispatch);
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
activeScreen: state.activeScreen,
|
|
currentPost: state.currentPost,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(AppContainer); |