React Native 0.87

Ejercicios de React Native sobre Estilos

7 ejercicios de Estilos en React Native. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.

Prueba cuatro ejercicios sin cuenta Crear cuenta gratis

1 · Elige la respuesta · nivel 1
En un estilo de React Native, ¿qué significa padding: 16?
```
const styles = StyleSheet.create({ card: { padding: 16 } });
```
- A16 puntos independientes de la densidad de pantalla
- B16 píxeles físicos
- C16 rem
- DNada: falta la unidad y da error
Ver la respuesta
Respuesta: A. 16 puntos independientes de la densidad de pantalla
Los números de los estilos no llevan unidad: son puntos independientes de la densidad, así que ocupan lo mismo en una pantalla normal que en una de alta resolución. También se aceptan porcentajes como texto, "50%".
2 · Elige la respuesta · nivel 1
¿Cómo se escribe un estilo en React Native?
- AComo un objeto de JavaScript: { color: "red" }
- BComo texto CSS: "color: red;"
- CEn un fichero .css importado
- DCon la etiqueta <style>
Ver la respuesta
Respuesta: A. Como un objeto de JavaScript: { color: "red" }
Los estilos son objetos de JavaScript, normalmente creados con StyleSheet.create. No hay ficheros CSS.
3 · Elige la respuesta · nivel 1
¿Cómo se escribe el tamaño de letra en un estilo de React Native?
- AfontSize
- Bfont-size
- Cfontsize
- DFontSize
Ver la respuesta
Respuesta: A. fontSize
Las propiedades de estilo van en camelCase: fontSize, backgroundColor, marginTop. Con guiones (font-size) es la sintaxis de CSS.
4 · Encuentra el fallo · nivel 1
El fondo no se pone azul. ¿Qué línea tiene el fallo?
```
1const styles = StyleSheet.create({2  box: {3    "background-color": "blue",4    padding: 12,5  },6});
```
Ver la respuesta
El fallo está en la línea 3: "background-color": "blue", Se arregla con backgroundColor: "blue",.
Las propiedades de estilo van en camelCase: backgroundColor. Con guion es la sintaxis de CSS y React Native la ignora.
5 · Completa el hueco · nivel 1
Completa para definir y aplicar un estilo.
```
const styles = StyleSheet.___({  card: { padding: 16, borderRadius: 12 },}); <View ___={styles.card} />
```
- create
- style
- className
- make
- css
- styles
Ver la respuesta
Respuesta: create · style
```
const styles = StyleSheet.create({  card: { padding: 16, borderRadius: 12 },}); <View style={styles.card} />
```
StyleSheet.create define los estilos y la prop style los aplica. En React Native no existe className.
6 · Completa el hueco · nivel 1
Completa para poner el título en rojo.
```
<Text ___={{ ___: "red" }}>Aviso</Text>
```
- style
- color
- className
- font-color
Ver la respuesta
Respuesta: style · color
```
<Text style={{ color: "red" }}>Aviso</Text>
```
Los estilos se pasan con la prop style, que recibe un objeto. El color del texto es color. className no existe en React Native.
7 · Ordena las líneas · nivel 1
Ordena la definición de un estilo title con letra de 24.
- font-size: 24,
- fontSize: 24,
- },
- title: {
- });
- const styles = StyleSheet.create({
Ver la respuesta
El orden correcto:
```
const styles = StyleSheet.create({  title: {    fontSize: 24,  },});
```
Sobran: font-size: 24,
StyleSheet.create recibe un objeto con un estilo por nombre. Las propiedades van en camelCase: fontSize.

Más temas de React Native

Ver toda la ruta de React Native