Реагировать на собственные глобальные стили

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



вместо того, чтобы повторять в каждом компоненте(и впоследствии должны изменить его в x местах, если это необходимо), моя первоначальная мысль состоит в том, чтобы создать "базовый" класс Таблицы Стилей в своем собственном файле и импортировать его в мой комплектующие.



есть ли лучший или более "реагировать" способ?

505   9  

9 ответов:

вы можете создать шаблон многоразового использования. Пример:

стиль.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>
80  
2018-06-09 11:48:13

создайте файл для ваших стилей (т. е.,Style.js).

вот пример:

import { StyleSheet } from 'react-native';

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

в любой из файлов, которые вы хотите использовать свой стиль, добавьте следующее:

import styles from './Styles'
43  
2017-05-03 00:05:32

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

AppStyles.js

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

.усвн.js

import AppStyles from './AppStyles';

const styles = StyleSheet.create({
    container: {
        backgroundColor: AppStyles.colour.background
    }
});
8  
2017-07-17 20:17:44

вы также можете попробовать реагировать родной расширенная стилей который поддерживает глобальные переменные стиля:

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

// component.js
var styles = EStyleSheet.create({
  button: {
    backgroundColor: '$buttonColor',
    ...
  }
});
7  
2016-03-05 12:14:43

вы должны создать файл для хранения всех стиль как 'стили.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>
    );
  }
}
4  
2018-01-26 11:11:30

попробуйте мою библиотеку реагировать родной стиль-тахионы, что не только дает вам глобальные стили, но и дизайн-первую, отзывчивую систему компоновки с шириной и высотой относительно вашего корневого размера шрифта.

2  
2016-08-03 11:39:47

внешний 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>
0  
2018-01-24 09:14:39

все эти методы напрямую ответить на вопрос, но это не способ сделать это. Эти люди застряли в старом образе мышления, где вы стиль доступных элементов. В React вы делаете компонентов. Поэтому, если вам нужен базовый компонент, который не существует, вы делаете это. например:

function getStyle (styleProp) {
  return {
    color   : getTheme().text,
    fontSize: 14,
    ...styleProp
  }
}

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

и затем использовать CustomText везде вместо Text. Вы также можете сделать это с помощью View,div,span или что-нибудь еще.

0  
2018-09-20 18:59:54

посмотри Темы 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, компонент-оболочка, который обеспечивает стиль для всех других компонентов через контекст. Похожие на возвращение StoreProvider.

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

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

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

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

-3  
2017-04-06 09:05:25

Comments

    Ничего не найдено.
Click here to cancel reply.