Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Creando una aplicación móvil con React Native usando WordPress REST API
/**
* BetaBeers React Native App with WP REST API v 1.0
*/
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
} = React;
var MOCKED_DATA = [
{title: 'BetaBeers Title 01', content: "If there's no 'there' there, where is it and what's there?"},
];
// La dirección URL del endpoint entradas de la WP API REST
var REQUEST_URL = 'http://betabeers.dev/wp-json/wp/v2/posts/';
var BetaBeers = React.createClass({
getInitialState: function() {
return {
page: MOCKED_DATA[0],
};
},
// Función solicitada automáticamente por React cuando el compoennte finaliza la carga
componentDidMount: function() {
this.fetchData();
},
// Extrae la información de nuestra API y actualiz el estado de la aplicación
fetchData: function() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
// this.setState() hace que la nueva información se muestre con la función render declarada después
this.setState({
page: { title: responseData[0].title.rendered, content: responseData[0].content.rendered },
});
})
.done();
},
render: function() {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.title}>
{this.state.page.title}
</Text>
<Text style={styles.text}>
{this.state.page.content}
</Text>
</View>
<View style={styles.buttonContainer}>
<TouchableHighlight
style={styles.button}
underlayColor='#ccc'
>
<Text style={styles.buttonText}>Hmmmmm...</Text>
</TouchableHighlight>
</View>
</View>
);
}
});
var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
title: {
fontSize: 30,
textAlign: 'center',
margin: 10,
},
text: {
fontSize: 18,
paddingLeft: 20,
paddingRight: 20,
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
buttonContainer: {
bottom: 0,
flex: .1,
width: windowSize.width,
backgroundColor: '#eee',
},
button: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
fontSize: 30,
color: '#666666',
},
});
AppRegistry.registerComponent('BetaBeers', () => BetaBeers);
componentDidMount: function() {
this.fetchData();
},
fetchData: function() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
page: { title: responseData[0].title.rendered, content:responseData[0].content.rendered },
});
})
.done();
},
var REQUEST_URL = 'http://betabeers.dev/wp-json/wp/v2/posts/';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.