React Native - Styling
Ci sono un paio di modi per modellare i tuoi elementi in React Native.
Puoi usare il file styleproprietà per aggiungere gli stili in linea. Tuttavia, questa non è la procedura migliore perché può essere difficile leggere il codice.
In questo capitolo useremo il Stylesheet per lo styling.
Componente contenitore
In questa sezione, semplificheremo il nostro componente contenitore dal capitolo precedente.
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'
export default class App extends React.Component {
state = {
myState: 'This is my state'
}
render() {
return (
<View>
<PresentationalComponent myState = {this.state.myState}/>
</View>
);
}
}
Componente presentazionale
Nell'esempio seguente, importeremo il file StyleSheet. In fondo al file, creeremo il nostro foglio di stile e lo assegneremo al filestylescostante. Nota che i nostri stili sono incamelCase e non usiamo px o% per lo styling.
Per applicare gli stili al nostro testo, dobbiamo aggiungere style = {styles.myText} proprietà al Text elemento.
PresentationalComponent.js
import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
const PresentationalComponent = (props) => {
return (
<View>
<Text style = {styles.myState}>
{props.myState}
</Text>
</View>
)
}
export default PresentationalComponent
const styles = StyleSheet.create ({
myState: {
marginTop: 20,
textAlign: 'center',
color: 'blue',
fontWeight: 'bold',
fontSize: 20
}
})
Quando eseguiamo l'app, riceveremo il seguente output.