Native reagieren - Styling

Es gibt verschiedene Möglichkeiten, Ihre Elemente in React Native zu gestalten.

Du kannst den ... benutzen styleEigenschaft, um die Stile inline hinzuzufügen. Dies ist jedoch nicht die beste Vorgehensweise, da es schwierig sein kann, den Code zu lesen.

In diesem Kapitel werden wir die verwenden Stylesheet zum Stylen.

Containerkomponente

In diesem Abschnitt werden wir unsere Containerkomponente aus unserem vorherigen Kapitel vereinfachen.

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>
      );
   }
}

Präsentationskomponente

Im folgenden Beispiel importieren wir die StyleSheet. Am Ende der Datei erstellen wir unser Stylesheet und weisen es dem zustylesKonstante. Beachten Sie, dass unsere Stile in sindcamelCase und wir verwenden nicht px oder% für das Styling.

Um Stile auf unseren Text anzuwenden, müssen wir hinzufügen style = {styles.myText} Eigentum an der 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
   }
})

Wenn wir die App ausführen, erhalten wir die folgende Ausgabe.