Globalne style React Native


100

Jestem nowy w React i rozumiem zalety wbudowanych stylów opartych na komponentach. Ale zastanawiam się, czy istnieje przyzwoity sposób na stworzenie jakiegoś globalnego stylu. Na przykład chciałbym używać tej samej kolorystyki tekstu i przycisków w całej mojej aplikacji.

Zamiast powtarzać w każdym komponencie (a następnie zmieniać go w x miejscach, jeśli zajdzie taka potrzeba), moją pierwszą myślą było utworzenie „bazowej” klasy StyleSheet w swoim własnym pliku i zaimportowanie jej do moich komponentów.

Czy jest lepszy lub bardziej „reaguj” sposób?

Odpowiedzi:


121

Możesz utworzyć arkusz stylów wielokrotnego użytku. Przykład:

style.js

'use strict';

var React = require('react-native');

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

alwaysred: {
    backgroundColor: 'red',
    height: 100,
    width: 100,
},

});

W twoim komponencie:

var s = require('./style');

...następnie:

<View style={s.alwaysred} ></View>

Tak, to właśnie opisałem. Dzięki za potwierdzenie, że wpadłem na dobry pomysł. Na razie oznaczy jako poprawną odpowiedź.
Patm

18
Teraz możesz po prostu użyćimport { StyleSheet } from 'react-native';
LYu

Dodałem odpowiedź wyjaśniającą inny sposób uzyskiwania globalnego stylu, możesz przyjrzeć się stackoverflow.com/questions/30853178/react-native-global-styles/… . Jest znacznie bardziej elastyczny i zgodny z duchem React, ponieważ unika statycznej definicji.
Pan Br

Nie zgadzam się, to nie jest DRY, a także projekt oparty na komponentach (lub architekturze), jak jest zalecany w ekosystemie React. każdy komponent z domyślnym stylem będzie wymagał style={defaultStyle}dodania. Zamiast tego możesz utworzyć DefaultViewi użyć tego zamiast dostarczonego, viewktóry jest stylizowany na twoją specyfikację.
Jakiś

To jest to czego chcę. Dziękuję.
Biplov Kumar

89

Utwórz plik dla swoich stylów (IE, Style.js ).

Oto przykład:

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1
  },
  welcome: {
    fontSize: 20
  }
});

W każdym z plików, których chcesz użyć swojego stylu, dodaj następujące elementy:

import styles from './Style'

7
Podejrzewam, że ta odpowiedź jest teraz bardziej odpowiednia!
villancikos

1
„./Styles” powinno mieć wartość „./Style”, aby dopasować nazwę pliku Style.js
oOEric

Zduplikowana odpowiedź stackoverflow.com/a/30858201/5243543
ThaJay


10

Jeśli chcesz ustawić tylko zmienne globalne, możesz spróbować.

AppStyles.js

export default AppStyles = {
    colour: {
        background: '#f4f9fd',
        font: '#434e5a',
        primary: '#ff3b30'
    }
}

index.ios.js

import AppStyles from './AppStyles';

const styles = StyleSheet.create({
    container: {
        backgroundColor: AppStyles.colour.background
    }
});

Nie potrzebujesz importu w AppStyles.js, ale jest to idealne rozwiązanie, gdy potrzebujesz tylko prostych globalnych zmiennych stylu!
willedanielsson

Zduplikowana odpowiedź stackoverflow.com/a/30858201/5243543
ThaJay

8

Musisz utworzyć plik, aby przechowywać w nim cały styl, taki jak „ styles.js ” i napisać kod typu css, jak potrzebujesz

'use strict';
import {StyleSheet} from 'react-native';

export default StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    title: {
        fontSize: 10,
        color: '#000',
        backgroundColor: '#fff'
    },

    button: {
        fontSize: 12,
        color: '#000',
        backgroundColor: '#fff'
    }

});

a teraz możesz użyć stylu globalnego, jak widzisz

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import StyleSheet from './config/styles';

export default class App extends Component {

  render() {
    return (
      <View
        style={StyleSheet.container}>
        <Button
          style={StyleSheet.button}
          title="Go to Lucy's profile"
        />
      </View>
    );
  }
}


2

Wypróbuj moją bibliotekę, która reaguje na tachiony w stylu natywnym , która nie tylko zapewnia globalne style, ale także pierwszy w projekcie, responsywny system układania z szerokościami i wysokościami w stosunku do rozmiaru głównego czcionki.


To jest interesujące! Na pierwszy rzut oka wyglądało to dziwnie, ale kiedy o tym myślę i biorąc pod uwagę mniej kodu, który musiałbym napisać, wydaje się całkiem niezły.
Niclas

Cieszę się, że to działa dla Ciebie. Nauczysz się szczególnie doceniać skalę odstępów. Jeśli potrzebujesz wsparcia, skontaktuj się z nami.
Fabian Zeindl

1
@Niclas Byłbym bardzo zadowolony, gdybyś mógł oznaczyć moją paczkę gwiazdką na NPM: npmjs.com/package/react-native-style-tachyons , powodem jest to, że mam też przestarzałą wersję tego pakietu online, która obecnie jest wyżej w rankingu , z powodu gwiazd.
Fabian Zeindl

Cześć Fabian, czy jest możliwe, aby domyślny styl był automatycznie stosowany do niektórych elementów, na przykład Tekst? Czy możesz podać przykład tego? Nie sądzę, aby OP chciał określić style = dla każdego elementu, ale wydaje się, że zdecydowali się na to.
Michael Ribbons

Nie z moją biblioteką, nie.
Fabian Zeindl,

2

Wszystkie te metody bezpośrednio odpowiadają na pytanie, ale jeśli o mnie chodzi, nie jest to sposób na zrobienie tego w systemie projektowania opartego na komponentach, takim jak React.

Możemy zacząć od atomowych komponentów, a następnie ułożyć je warstwami i pogrupować aż do samej góry. Poniższy artykuł może wyjaśnić ten tok myśli: http://atomicdesign.bradfrost.com/chapter-2/

W świecie przyrody pierwiastki atomowe łączą się razem, tworząc cząsteczki. Te cząsteczki mogą się dalej łączyć, tworząc stosunkowo złożone organizmy.

Jeśli potrzebujesz podstawowego komponentu, który nie istnieje, możesz go zrobić. Następnie możesz wykonać z nim inne, mniej specyficzne komponenty. na przykład:

// rerender is cheaper without style prop when
// the default style is an unchanged reference
// instead of a new object every time.
const style = {
  color   : 'MidnightBlue',
  fontSize: 14,
}

function getStyle (styleProp) {
  // styleProp is able to overwrite style
  if (styleProp) return {...style, ...styleProp}
  else return style
}

export default function CustomText (props) {
  return (
    <Text style={getStyle(props.style)}>
      {props.children}
    </Text>
  )
}

Następnie używaj CustomTextwszędzie zamiast Text. Można również zrobić to z View, div, spanczy cokolwiek innego.


@TheJay ma to sens w przypadku poszczególnych komponentów, ale jak nadałbyś styl wszystkim ekranom? Coś jak strony wzorcowe asp.net: quanzhanketang.com/aspnet/aspnet_masterpages.html
mxmissile

Czy przeczytałeś ostatnie zdanie? To tak proste, jak wymiana <Text />z <CustomText />wszędzie. Możesz nawet zaimportować CustomText jako Text, więc musisz tylko zastąpić import.
ThaJay

0

Zewnętrzny plik CSS main.css

'use strict';

var {
   StyleSheet,
 } = 'react-native';

module.exports = StyleSheet.create({

  main: {
     backgroundColor: 'gray',
     height: 20,
     width: 100,
  }
});

utwórz wystąpienie pliku css w komponencie.

var mainCss = require('./main');

<View style={mainCss.main}><Text>Hello</Text></View>

Zduplikowana odpowiedź stackoverflow.com/a/30858201/5243543
ThaJay

0

Tutaj możesz znaleźć elegancki sposób sortowania stylów, a następnie importować je do różnych komponentów, możesz utworzyć folder, w którym zbierzesz wszystkie pliki stylów i utworzysz plik index.js, który będzie działał jako fasada:

plik index.js będzie wyglądał następująco:

import Variables from './variables';
import GlobalStyles from './global'; 

export { Variables, GlobalStyles };

a następnie zaimportuj w ten sposób:

import { GlobalStyles } from './stylesheets/index';

Więcej informacji tutaj:

https://thoughtbot.com/blog/structure-for-styling-in-react-native


0

Mój działał przy użyciu podobnego

Utwórz katalog o nazwie „constants”. Utwórz plik w ./constants/AppStyles.js

 /**
 * Project level stylesheet for common styles
 */


import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    margin: 20,
    alignItems: 'center',
    alignContent: 'center',
    paddingVertical: 60
  }
  
});

Następnie w App.js odwołaj się do tego pliku i utworzonych stylów.

import React from 'react';
import {
  View,
  Text
} from 'react-native';
import AppStyles from './constants/AppStyles';

const App = () => {
  return (
    <View style={ AppStyles.container }>
      <Text>MOST BASIC Template EVER!</Text>
    </View>
  );
};

export default App;

Pułapki, w które wpadłem

  • Miałem nawiasy klamrowe wokół importu {AppStyles} z './constants/AppStyles'; ŹLE :-(
  • Stworzyłem AppStyles jako komponent i próbowałem wyeksportować stałą NIEPRAWIDŁOWĄ :-)

Znalazłem dobry kurs online i od razu go wymyśliłem


-4

Spójrz na motywy Shoutem dla React Native.

Oto, co otrzymujesz dzięki motywowi Shoutem:

Styl globalny, w którym określony styl jest automatycznie stosowany do komponentu według nazwy stylu:

const theme = {
  'my.app.ComponentStyleName': {
    backgroundColor: 'navy',
  },
};

Aktywowanie określonego stylu komponentu za pomocą styleName(jak klasa CSS):

const theme = {
  'my.app.ComponentStyleName': {
    '.rounded': {
      borderRadius: 20,
    },
    backgroundColor: 'navy',
  },
};

// Implementation - will apply borderRadius to Component
<Component styleName="rounded"/>

Automatyczne dziedziczenie stylu:

const theme = {
  'my.app.ComponentStyleName': {
    'my.app.ChildComponentStyleName': {
      backgroundColor: 'red',
    },
    '.rounded': {
      borderRadius: 20,
    },
    backgroundColor: 'navy',
  },
};

// Implementation - will apply red background color to ChildComponent
<Component styleName="rounded">
  <ChildComponent/>
</Component>

Styl zagnieżdżony dla komponentów złożonych:

const theme = {
  'my.app.ComponentStyleName': {
    containerView: {
      paddingTop: 10,
    },
    innerView: {
      backgroundColor: 'yellow',
    },
  },
};

// Of course do not forget to connect Component
function Component({ style }) {
  return (
   <View style={style.containerView}>
    <View style={style.innerView}>
     <Text>Warning with yellow background.</Text>
    </View>
   </View>
  );
}

Aby to działało, musisz użyć StyleProviderkomponentu opakowania, który zapewnia styl wszystkim innym komponentom poprzez kontekst. Podobny do ReduxStoreProvider .

Musisz także podłączyć komponent do stylu, connectStyleaby zawsze używać połączonego komponentu. Podobny do Reduxconnect .

export const styledComponent = connectStyle('my.app.ComponentStyleName',
                                { ...defaultStyleIfAny })(Component);

Możesz zobaczyć przykład w dokumentacji.

I ostatnia rzecz, dostarczyliśmy również zestaw komponentów w naszym zestawie narzędzi interfejsu użytkownika, które są już połączone ze stylem, więc możesz je po prostu zaimportować i nadać styl w swoim globalnym stylu / motywie.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.