React Native глобальные стили

Я новичок в 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'

Вы также можете попробовать response-native-extended-stylesheet, который поддерживает глобальные переменные стиля:

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

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

Если вы просто хотите установить некоторые глобальные переменные, вы можете попробовать.

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

Вы должны создать файл для хранения всех стилей в нем, например, 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>
    );
  }
}

Попробуйте мою библиотеку react-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>

Здесь вы можете найти элегантный способ сортировки ваших стилей, а затем импортировать их в различные компоненты, вы можете создать папку, в которой вы собираете все файлы стилей, и создать index.js, который будет работать как фасад:

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

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

export { Variables, GlobalStyles };

а затем импортируйте вот так:

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

Здесь для получения дополнительной информации:

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

Я работал с похожими

Создайте каталог с именем 'constants'. Создайте файл в ./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
  }
  
});

Затем в App.js укажите ссылку на этот файл и созданные стили.

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;

Ловушки, в которые я попал

• У меня были фигурные скобки вокруг import {AppStyles} из './constants/AppStyles'; НЕПРАВИЛЬНО :-(
• Я создал AppStyles как компонент и попытался экспортировать const НЕПРАВИЛЬНО :-)

Нашел хороший курс в Интернете и понял это оттуда

Взгляните на темы Shoutem для React Native.

Вот что вы получаете с Shoutem Theme:

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

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чтобы вы всегда использовали связанный компонент. Подобно Redux connect.

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

Вы можете увидеть пример в документации.

И последнее: мы также предоставили набор компонентов в нашем UI ToolKit, которые уже связаны со стилем, поэтому вы можете просто импортировать их и стилизовать в своем глобальном стиле / теме.