React Native - Stylizacja
Istnieje kilka sposobów stylizacji elementów w React Native.
Możesz użyć stylewłaściwość, aby dodać style w tekście. Nie jest to jednak najlepsza praktyka, ponieważ odczytanie kodu może być trudne.
W tym rozdziale użyjemy Stylesheet do stylizacji.
Komponent kontenera
W tej sekcji uprościmy nasz komponent kontenera z poprzedniego rozdziału.
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>
);
}
}
Komponent prezentacyjny
W poniższym przykładzie zaimportujemy plik StyleSheet. U dołu pliku utworzymy nasz arkusz stylów i przypiszemy go dostylesstały. Zwróć uwagę, że nasze style są w formaciecamelCase i nie używamy px lub% do stylizacji.
Aby zastosować style do naszego tekstu, musimy dodać style = {styles.myText} właściwość do Text element.
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
}
})
Po uruchomieniu aplikacji otrzymamy następujące dane wyjściowe.