Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import { StyleSheet, ScrollView, Text, View, Image } from 'react-native';
- class Card extends Component {
- render(){
- return (
- <View style={styles.container}>
- <Image source={{uri: this.props.image}} style={{width:150, height: 150}}/>
- <Text style={{color: 'steelblue', marginTop: 5}}>Hello World, {this.props.title}!</Text>
- </View>
- );
- }
- }
- let progLang = [
- {
- title: "React Native",
- imageurl: "http://angular.github.io/react-native-renderer/assets/react.png"
- },
- {
- title: "JavaScript",
- imageurl: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/1024px-Unofficial_JavaScript_logo_2.svg.png"
- },
- {
- title: "C++",
- imageurl: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1200px-ISO_C%2B%2B_Logo.svg.png"
- },
- {
- title: "Java",
- imageurl: "https://image.flaticon.com/icons/png/512/226/226777.png"
- }
- ];
- export default class App extends Component {
- render() {
- let LangCard = progLang.map(lang => {
- return (
- <Card
- key = {"LanguageCard" + lang.title }
- image = {lang.imageurl}
- title = {lang.title}
- />
- );
- })
- return (
- <View style={{
- flex: 1,
- backgroundColor: "steelblue",
- alignItems: "center",
- justifyContent: "center",}}>
- <ScrollView>
- {LangCard}
- </ScrollView>
- </View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- marginTop: 10,
- height: 200,
- width: 330,
- borderRadius: 10,
- },
- });
Add Comment
Please, Sign In to add comment