Реагуйте на рідні глобальні стилі

Я новачок у React і розумію переваги вбудованих стилів на основі компонентів. Але мені цікаво, чи є гідний спосіб мати якийсь глобальний стиль. Наприклад, я хотів би використовувати одне і те ж забарвлення тексту та кнопок у всій програмі.

Замість того, щоб повторювати в кожному компоненті (і згодом його доведеться міняти в x місцях, якщо це потрібно), моя початкова думка полягає в тому, щоб створити "базовий" клас StyleSheet у власному файлі та імпортувати його в мої компоненти.

Чи є кращий чи більш «Реагувати» спосіб?

Ви можете створити таблицю стилів для багаторазового використання. Приклад:

style.js

'use strict';

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

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

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

});

У вашому компоненті:

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

...тоді:

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

Створіть файл для своїх стилів (IE, Style.js).

Ось приклад:

import { StyleSheet } from 'react-native';

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

У будь-який з файлів, які потрібно використовувати у своєму стилі, додайте таке:

import styles from './Style'

Якщо ви просто хочете встановити деякі глобальні змінні, ви можете спробувати.

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

Ви також можете спробувати зреагувати-нативной Продовжено таблицю стилів , яка підтримує глобальні змінні стайлінгу:

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

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

Ви повинні створити файл для зберігання у ньому всього стилю, як-от ' styles.js ', і написати код типу css, як вам потрібно

'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'
    }

});

і тепер ви можете використовувати глобальний стиль, як бачите

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

Спробуйте мою бібліотеку response-native-style-tachyons , яка не лише надає вам глобальні стилі, але і адаптивну систему компонування, що відповідає дизайну, із ширинами та висотами щодо вашого кореневого розміру шрифту.

Всі ці методи безпосередньо відповідають на питання, але, що стосується мене, це не спосіб зробити це в системі проектування на основі компонентів, як React.

Ми можемо почати з атомних компонентів, а потім скласти і згрупувати їх аж до верху. Наступна стаття може зробити цей хід думок більш зрозумілим: http://atomicdesign.bradfrost.com/chapter-2/

У природному світі атомні елементи поєднуються разом, утворюючи молекули. Ці молекули можуть далі поєднуватися, утворюючи відносно складні організми.

Якщо вам потрібен базовий компонент, який не існує, ви зробите це. Тоді ви можете виготовити з ним інші, менш конкретні компоненти. наприклад:

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

Тоді використовуйте CustomTextскрізь замість Text. Ви також можете зробити це з View, div, spanабо що - небудь ще.

Зовнішній файл CSS main.css

'use strict';

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

module.exports = StyleSheet.create({

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

створити екземпляр css-файлу в компоненті.

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

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

Тут ви можете знайти елегантний спосіб сортувати свої стилі, а потім імпортувати до різних компонентів, ви можете створити папку, в яку ви збираєте всі файли стилів, а також create і index.js, який буде працювати як фасад:

index.js буде виглядати так:

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

export { Variables, GlobalStyles };

а потім імпортуйте так:

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

Ось додаткова інформація:

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

Погляньте на теми Shoutem для React Native.

Ось що ви отримуєте від теми Shoutem:

Глобальний стиль, де певний стиль автоматично застосовується до компонента за його назвою стилю:

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

Активація певного стилю, специфічного для компонента, styleName(наприклад, класу CSS):

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

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

Автоматичне успадкування стилю:

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>

Вкладений стиль для компонованих компонентів:

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

Щоб це працювало, вам потрібно використовувати StyleProviderкомпонент-обгортку, який надає стиль усім іншим компонентам через контекст. Подібно до Redux StoreProvider.

Також вам потрібно підключити ваш компонент до стилю, connectStyleщоб ви завжди використовували підключений компонент. Подібно до Reduxconnect .

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

Ви можете побачити приклад у документації.

Останнє, ми також надали набір компонентів у нашому наборі інтерфейсів, які вже підключені до стилю, тому ви можете просто імпортувати їх та стиль у своєму глобальному стилі / темі.