StyleSheet y Flexbox

StyleSheet API y Flexbox

Uso de StyleSheet, estilos por plataforma, layouts flexibles y grids.

typescript
Copiar
1import { View, Text, StyleSheet, Platform, TouchableOpacity } from 'react-native'
2
3// StyleSheet básico
4function StyledComponent() {
5  return (
6    <View style={styles.container}>
7      <Text style={styles.text}>Hola Mundo</Text>
8      <TouchableOpacity style={[styles.button, styles.primaryButton]}>
9        <Text style={styles.buttonText}>Presionar</Text>
10      </TouchableOpacity>
11    </View>
12  )
13}
14
15// Flexbox Examples
16function FlexboxExamples() {
17  return (
18    <View style={styles.flexContainer}>
19      {/* Row Layout */}
20      <View style={styles.row}>
21        <View style={[styles.box, { backgroundColor: '#FF6B6B' }]} />
22        <View style={[styles.box, { backgroundColor: '#4ECDC4' }]} />
23        <View style={[styles.box, { backgroundColor: '#45B7D1' }]} />
24      </View>
25
26      {/* Column Layout */}
27      <View style={styles.column}>
28        <View style={[styles.box, { backgroundColor: '#FFA07A' }]} />
29        <View style={[styles.box, { backgroundColor: '#98D8C8' }]} />
30      </View>
31
32      {/* Centered Layout */}
33      <View style={styles.centered}>
34        <Text style={styles.centeredText}>Centrado</Text>
35      </View>
36    </View>
37  )
38}
39
40// Grid Layout
41function GridLayout() {
42  const items = Array.from({ length: 6 }, (_, i) => i + 1)
43
44  return (
45    <View style={styles.grid}>
46      {items.map((item) => (
47        <View key={item} style={styles.gridItem}>
48          <Text style={styles.gridItemText}>{item}</Text>
49        </View>
50      ))}
51    </View>
52  )
53}
54
55const styles = StyleSheet.create({
56  container: {
57    flex: 1,
58    padding: 16,
59    backgroundColor: '#f5f5f5'
60  },
61  text: {
62    fontSize: 16,
63    ...Platform.select({
64      ios: {
65        fontFamily: 'System',
66        fontWeight: '500'
67      },
68      android: {
69        fontFamily: 'Roboto',
70        fontWeight: 'normal'
71      }
72    })
73  },
74  button: {
75    padding: 12,
76    borderRadius: 8,
77    alignItems: 'center'
78  },
79  primaryButton: {
80    backgroundColor: '#007AFF'
81  },
82  buttonText: {
83    color: 'white',
84    fontSize: 16,
85    fontWeight: '600'
86  },
87  flexContainer: {
88    flex: 1,
89    gap: 16
90  },
91  row: {
92    flexDirection: 'row',
93    justifyContent: 'space-between',
94    gap: 8
95  },
96  column: {
97    flexDirection: 'column',
98    gap: 8
99  },
100  box: {
101    width: 80,
102    height: 80,
103    borderRadius: 8
104  },
105  centered: {
106    height: 100,
107    justifyContent: 'center',
108    alignItems: 'center',
109    backgroundColor: '#E8E8E8',
110    borderRadius: 8
111  },
112  centeredText: {
113    fontSize: 18,
114    fontWeight: 'bold'
115  },
116  grid: {
117    flexDirection: 'row',
118    flexWrap: 'wrap',
119    gap: 8,
120    padding: 8
121  },
122  gridItem: {
123    width: '31%',
124    aspectRatio: 1,
125    backgroundColor: '#007AFF',
126    justifyContent: 'center',
127    alignItems: 'center',
128    borderRadius: 8
129  },
130  gridItemText: {
131    color: 'white',
132    fontSize: 24,
133    fontWeight: 'bold'
134  }
135})