Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <Content>
- <Grid style={{flexWrap: 'wrap', flex: 1}}>
- {this.state.stories.map(function(story, index){
- if (index % 2 === 0) {
- return <Col key={ index } style={{margin: 5, width: Dimensions.get('window').width / 2.2}}>
- <View>
- <Image style={{ height: 250, borderRadius: 10}} source={{uri: story.picture_url}} />
- </View>
- </Col>
- } else{
- return <Col key={ index } style={{margin: 5, width: Dimensions.get('window').width / 2.2}}>
- <View style={{marginTop: 25}}>
- <Image style={{height: 250, borderRadius: 10}} source={{uri: story.picture_url}} />
- </View>
- </Col>
- }
- }.bind(this))
- }
- </Grid>
- </Content>
- /**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
- import React, { Component } from 'react';
- import {
- AppRegistry,
- StyleSheet,
- Text,
- View
- } from 'react-native';
- export default class layout extends Component {
- render() {
- return (
- <View style={styles.container}>
- <View style={styles.column}>
- <View style={[styles.box, {backgroundColor:'red'}]}/>
- <View style={[styles.box, {backgroundColor:'pink'}]}/>
- <View style={[styles.box, {backgroundColor:'orange'}]}/>
- </View>
- <View style={styles.space_between_columns}/>
- <View style={styles.column}>
- <View style={[styles.box, {backgroundColor:'blue'}]}/>
- <View style={[styles.box, {backgroundColor:'green'}]}/>
- <View style={[styles.box, {backgroundColor:'purple'}]}/>
- </View>
- </View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- flexDirection:'row',
- justifyContent: 'center',
- alignItems: 'center',
- backgroundColor: '#F5FCFF',
- },
- column: {
- flexDirection:'column',
- justifyContent:'space-between',
- alignItems:'center',
- height:200,
- width:50
- },
- space_between_columns:{
- width:100
- },
- box: {
- height:50,
- width:50
- }
- });
- AppRegistry.registerComponent('layout', () => layout);
- <Content>
- <Grid style={{flexWrap: 'wrap', flex: 1}}>
- {this.state.stories.map(function(story, index){
- if (index % 2 === 0) {
- return
- <Row style={{flex:1}}>
- <Col key={ index } style={{margin: 5, flex:.5}}>
- <View>
- <Image style={{ height: 250, borderRadius: 10}} source={{uri: story.picture_url}} />
- </View>
- </Col>
- {(() => { if (index + 1 < (this.state.subjects.length - 1)) {
- return <Col key={ index + 1 } style={{margin: 5, flex:.5}}>
- <View style={{marginTop: 25}}>
- <Image style={{height: 250, borderRadius: 10}} source={{uri: this.state.stories[index+1].picture_url}} />
- </View>
- </Col>
- }
- else
- {
- return <Col style={{margin: 5, flex:.5}}/>
- }
- })()}
- }
- }.bind(this))
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement