Componentes Core

View, Text, Image, ScrollView, SafeAreaView

Ejemplos de uso y estilos para cada componente core.

typescript
Copiar
1import { View, Text, Image, ScrollView, SafeAreaView, StyleSheet } from 'react-native'
2
3// Card Component
4function Card({ title, description }: { title: string; description: string }) {
5  return (
6    <View style={styles.card}>
7      <View style={styles.cardHeader}>
8        <Text style={styles.cardTitle}>{title}</Text>
9      </View>
10      <View style={styles.cardBody}>
11        <Text style={styles.cardDescription}>{description}</Text>
12      </View>
13    </View>
14  )
15}
16
17// Typography Examples
18function Typography() {
19  return (
20    <View>
21      <Text style={styles.h1}>Título Principal</Text>
22      <Text style={styles.h2}>Subtítulo</Text>
23      <Text style={styles.body}>
24        Texto normal del párrafo con <Text style={styles.bold}>negrita</Text> y{' '}
25        <Text style={styles.link}>enlaces</Text>.
26      </Text>
27      <Text numberOfLines={2} ellipsizeMode="tail">
28        Texto muy largo que se truncará después de dos líneas...
29      </Text>
30    </View>
31  )
32}
33
34// Image Examples
35function ImageExamples() {
36  return (
37    <View style={styles.imageContainer}>
38      {/* Imagen desde URL */}
39      <Image
40        source={{ uri: 'https://picsum.photos/300/200' }}
41        style={styles.image}
42        resizeMode="cover"
43      />
44
45      {/* Imagen local */}
46      <Image
47        source={require('./assets/logo.png')}
48        style={styles.logo}
49      />
50
51      {/* Imagen con placeholder */}
52      <Image
53        source={{ uri: 'https://picsum.photos/300/201' }}
54        style={styles.image}
55        defaultSource={require('./assets/placeholder.png')}
56      />
57    </View>
58  )
59}
60
61// Screen with SafeAreaView
62function Screen() {
63  return (
64    <SafeAreaView style={styles.safeArea}>
65      <ScrollView style={styles.scrollView}>
66        <View style={styles.content}>
67          <Text style={styles.title}>Mi Pantalla</Text>
68          <Card title="Card 1" description="Descripción de la tarjeta 1" />
69          <Card title="Card 2" description="Descripción de la tarjeta 2" />
70          <ImageExamples />
71          <Typography />
72        </View>
73      </ScrollView>
74    </SafeAreaView>
75  )
76}
77
78const styles = StyleSheet.create({
79  safeArea: {
80    flex: 1,
81    backgroundColor: '#f5f5f5'
82  },
83  scrollView: {
84    flex: 1
85  },
86  content: {
87    padding: 16
88  },
89  title: {
90    fontSize: 28,
91    fontWeight: 'bold',
92    marginBottom: 20
93  },
94  card: {
95    backgroundColor: 'white',
96    borderRadius: 8,
97    marginBottom: 16,
98    shadowColor: '#000',
99    shadowOffset: { width: 0, height: 2 },
100    shadowOpacity: 0.1,
101    shadowRadius: 4,
102    elevation: 3
103  },
104  cardHeader: {
105    padding: 16,
106    borderBottomWidth: 1,
107    borderBottomColor: '#eee'
108  },
109  cardTitle: {
110    fontSize: 18,
111    fontWeight: '600'
112  },
113  cardBody: {
114    padding: 16
115  },
116  cardDescription: {
117    fontSize: 14,
118    color: '#666'
119  },
120  h1: {
121    fontSize: 32,
122    fontWeight: 'bold',
123    marginBottom: 8
124  },
125  h2: {
126    fontSize: 24,
127    fontWeight: '600',
128    marginBottom: 8
129  },
130  body: {
131    fontSize: 16,
132    lineHeight: 24,
133    marginBottom: 8
134  },
135  bold: {
136    fontWeight: 'bold'
137  },
138  link: {
139    color: '#007AFF',
140    textDecorationLine: 'underline'
141  },
142  imageContainer: {
143    gap: 16,
144    marginVertical: 16
145  },
146  image: {
147    width: '100%',
148    height: 200,
149    borderRadius: 8
150  },
151  logo: {
152    width: 100,
153    height: 100,
154    alignSelf: 'center'
155  }
156})