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

Ответ 1

Вы можете создать многостраничную таблицу стилей. Пример:

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>

Ответ 2

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

Вот пример:

import { StyleSheet } from 'react-native';

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

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

import styles from './Style'

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

Ответ 7

Внешний файл 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>

Ответ 8

Все эти методы напрямую отвечают на вопрос, но это не способ сделать это. Эти люди застряли в старом образе мышления, где вы создаете доступные элементы. В 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 или всего остального.

Ответ 9

Взгляните на Shoutem Themes для 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, которые уже подключены к стилю, поэтому вы можете просто импортировать их и стиль в вашем глобальном стиле/теме.