Globalne style React Native

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?

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>

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'

Możesz także wypróbować responsywny rozszerzony arkusz stylów, który obsługuje globalne zmienne stylów:

// app.js
EStyleSheet.build({
   buttonColor: 'green'
});

// component.js
var styles = EStyleSheet.create({
  button: {
    backgroundColor: '$buttonColor',
    ...
  }
});

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

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

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.

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.

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>

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

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

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.