Реагировать на внешнюю таблицу стилей

Есть ли способ в React Native, что я могу поместить все мои стили в один файл, чтобы его можно было легко сохранить (с моей точки зрения), как в HTML, у нас есть файл .css.

А также у меня есть модуль, в котором существуют разные стили, основанные на текущем пользователе.

Ответ 1

Вы могли бы просто создать компонент Styles, например, со всеми вашими стилями...

'use strict'
const React = require('react-native');
const { Stylesheet } = React;

module.exports = Stylesheet.create({
   ...
});

Затем для любого вида, требующего стилей, просто требуется его...

styles = require('./Styles');

Ответ 2

Согласно ECMAScript 6, правильный способ экспорта ваших стилей будет таким.

style.js

import React, {StyleSheet} from 'react-native'

export default StyleSheet.create({

container: {
    flex: 1,
    marginTop: 20
},
welcome: {
    textAlign: 'center'
}
});

Затем в вашем основном JS файле вы можете импортировать как это.

import styles from './style'

Ответ 3

Вы можете добавить этот модуль в свой конвейер и создать задачу Gulp или Webpack, чтобы переместить CSS в JavaScript.

https://github.com/sabeurthabti/react-native-css

По моему опыту вы лучше не используете один и тот же CSS для Интернета и не реагируете на native, потому что React Native stylesheets фактически не каскадируются.

Или, если вы захотите немного изменить свой конвейер, PostCSS, который является транспилером CSS4 для CSS3, который поддерживает все функции SASS, также может использоваться для пересылки, CSS для JavaScript

https://github.com/postcss/postcss-js

Ответ 4

Да, вы можете

Сначала создайте имя файла style.js и создайте стиль вы хотите, как в следующем примере:

Style.js

module.exports = {

    "centerRowAligment":{
        flex: 1,
        backgroundColor:"#a22a5f",
        flexDirection: 'row',
        alignItems:"center"
    },
    "centerColumnAligment":{
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column',
        alignItems: 'center'
    }

}

Затем в ваш файл ответов просто импортируйте его

import styles from './style'

И затем используйте его в компонентах рендеринга

   <View style={styles.centerRowAligment}></View>

Это должно работать нормально!

Ответ 5

Я согласен с решением @Chris Geirman. вы можете просто создать stylesSheet, как упоминалось выше Крисом и импортировать в любое представление. В случае, если вы хотите объединить внешний стиль в свой личный вид/таблицу стилей компонентов, вы можете использовать новую функцию ES6 Object.assign следующим образом:

styles = require ('./StyleSheet');

const viewStyle = Object.assign(стили, StyleSheet.create({ ... }); );

Ответ 6

Это работает для меня в последнем Реате:

У меня есть моя таблица стилей CoolTextStyle.js(которая находится в том же каталоге, что и мой index.ios.js). И, оказывается, вам даже не нужен класс StyleSheet

module.exports = 
{
  borderRadius:5
});

Затем в index.ios.js

import React, { Component, PropTypes } from 'react';
import { View, Text, TextInput,TouchableHighlight,StatusBar } from 'react-native';

var cool_text_style = require('./CoolTextStyle');

export default class delme extends Component 
{
  render() 
  {
    return (
  <View>
    <StatusBar hidden={true} />
    <Text>Login</Text>
    <TextInput placeHolder='UserName' style={cool_text_style}></TextInput>
  </View>
)
  }
}


AppRegistry.registerComponent('delme', () => delme);

Ответ 7

Весь процесс определения стилей в моем JavaScript вызвал у меня много путаницы, когда я впервые перешел к React Native из Ionic, поэтому надеюсь, что это поможет...

Во-первых, вы должны понимать, что React Native - это НЕ только приложение, работающее в собственном WebView. Вместо того, чтобы отображать divs и охватывает ваш JavaScript, на самом деле производятся компоненты более высокого уровня, специфичные для платформы.

Поэтому мы не можем применять одни и те же правила стиля (через внешние таблицы стилей .css), как если бы вы использовали гибридное приложение, использующее другую структуру, такую как Ionic. Ну не совсем в любом случае (см. Ниже).

Оба варианта, упомянутые выше, являются допустимыми решениями. Использование:

Отдельные файлы JavaScript, чтобы ваши стили были более модульными; и
Использование библиотек для пересылки CSS для восстановления исходных объектов StyleSheet.

Примечание по последней опции: Библиотеки, такие как postcss-js, не позволят вам использовать ваш CSS так, как обычно, например, на основе селекторов CSS, таких как .class и #id. Стили по-прежнему должны быть переданы компонентам через реквизиты.

Ответ 8

Вы можете попробовать мой проект rn-less.

Он изолирует вашу таблицу стилей от файлов jsx/js с помощью less.js.

И у меня есть расширение VS-кода для него, с помощью которого вы можете легко переходить между безликими файлами и файлами .js/.jsx.