Reaja estilos globais nativos

Sou novo no React e entendo os benefícios dos estilos inline baseados em componentes. Mas estou me perguntando se existe uma maneira decente de ter algum tipo de estilo global. Por exemplo, eu gostaria de usar a mesma coloração de texto e botão em todo o meu aplicativo.

Em vez de repetir em cada componente (e subsequentemente ter que alterá-lo em x lugares se necessário), meu pensamento inicial é criar uma classe StyleSheet 'base' em seu próprio arquivo e importá-la em meus componentes.

Existe uma maneira melhor ou mais 'Reagir'?

Você pode criar uma folha de estilo reutilizável. Exemplo:

style.js

'use strict';

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

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

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

});

Em seu componente:

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

...então:

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

Crie um arquivo para seus estilos (IE, Style.js).

Aqui está um exemplo:

import { StyleSheet } from 'react-native';

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

Em qualquer um dos arquivos que você deseja usar seu estilo, adicione o seguinte:

import styles from './Style'

Se você apenas deseja definir algumas variáveis ​​globais, você pode tentar.

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

Você também pode tentar react-native-extended-stylesheet que suporta variáveis ​​de estilo globais:

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

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

Você deve criar um arquivo para armazenar todos os estilos nele, como ' styles.js ' e escrever o código do tipo css conforme necessário

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

});

e agora você pode usar o estilo global, como pode ver

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

Tente minha biblioteca react-native-style-tachyons , que não só fornece estilos globais, mas um sistema de layout responsivo e com design inicial com larguras e alturas em relação ao tamanho da fonte de sua raiz.

Todos esses métodos respondem diretamente à pergunta, mas no que me diz respeito, não é a maneira de fazer isso em um sistema de design baseado em componentes como o React.

Podemos começar com componentes atômicos, em seguida, colocá-los em camadas e agrupá-los até o topo. O artigo a seguir pode tornar essa linha de pensamento mais clara: http://atomicdesign.bradfrost.com/chapter-2/

No mundo natural, os elementos atômicos se combinam para formar moléculas. Essas moléculas podem se combinar ainda mais para formar organismos relativamente complexos.

Se você precisa de um componente básico que não existe, você o cria. Então você pode fazer outros componentes menos específicos com ele. por exemplo:

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

Em seguida, use em CustomTextqualquer lugar em vez de Text. Você também pode fazê-lo com View, div, spanou qualquer outra coisa.

Arquivo CSS externo main.css

'use strict';

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

module.exports = StyleSheet.create({

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

crie uma instância do arquivo css no componente.

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

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

Aqui você pode encontrar uma maneira elegante de classificar seus estilos e, em seguida, importar para os diferentes componentes, você pode criar uma pasta na qual reúne todos os arquivos de estilos e cria um index.js que funcionará como fachada:

o index.js será semelhante a:

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

export { Variables, GlobalStyles };

e importe assim:

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

Aqui para mais informações:

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

Dê uma olhada em Temas Shoutem para React Native.

Aqui está o que você obtém com o tema Shoutem:

Estilo global em que determinado estilo é aplicado automaticamente ao componente por seu nome de estilo:

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

Ativando certo estilo específico de componente com styleName(como classe CSS):

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

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

Herança automática de estilo:

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>

Estilo aninhado para componentes compostos:

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

Para fazê-lo funcionar, você precisa usar StyleProvidero componente wrapper que fornece estilo a todos os outros componentes por meio do contexto. Semelhante ao Redux StoreProvider.

Além disso, você precisa conectar seu componente ao estilo connectStylepara sempre usar o componente conectado. Semelhante ao Redux connect.

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

Você pode ver um exemplo na documentação.

Uma última coisa, nós também fornecemos um conjunto de componentes em nosso UI ToolKit que já estão conectados ao estilo, então você pode apenas importá-los e estilo em seu estilo / tema global.