Reaccionar estilos globales nativos

Soy nuevo en React y entiendo los beneficios de los estilos en línea basados ​​en componentes. Pero me pregunto si hay una forma decente de tener algún tipo de estilo global. Por ejemplo, me gustaría usar el mismo color de Texto y Botón en toda mi aplicación.

En lugar de repetir en cada componente (y posteriormente tener que cambiarlo en x lugares si es necesario), mi pensamiento inicial es crear una clase StyleSheet 'base' en su propio archivo e importarla en mis componentes.

¿Existe una forma mejor o más de 'Reaccionar'?

Puede crear una hoja de estilo reutilizable. Ejemplo:

style.js

'use strict';

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

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

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

});

En su componente:

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

...luego:

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

Cree un archivo para sus estilos (IE, Style.js).

Aquí hay un ejemplo:

import { StyleSheet } from 'react-native';

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

En cualquiera de los archivos en los que desee utilizar su estilo, agregue lo siguiente:

import styles from './Style'

Si solo desea establecer algunas variables globales, puede intentarlo.

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

También puede probar react-native-extended-stylesheet que admite variables de estilo globales:

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

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

Debe crear un archivo para almacenar todo el estilo en él, como ' styles.js ' y escribir el código de tipo css que necesite

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

});

y ahora puede usar el estilo global como puede 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>
    );
  }
}

Pruebe mi biblioteca react-native-style-tachyons , que no solo le brinda estilos globales, sino también un sistema de diseño receptivo que prioriza el diseño con anchos y alturas en relación con el tamaño de fuente raíz.

Todos estos métodos responden directamente a la pregunta, pero en lo que a mí respecta, no es la forma de hacerlo en un sistema de diseño basado en componentes como React.

Podemos comenzar con componentes atómicos, luego colocarlos en capas y agruparlos hasta la parte superior. El siguiente artículo podría aclarar esta línea de pensamiento: http://atomicdesign.bradfrost.com/chapter-2/

En el mundo natural, los elementos atómicos se combinan para formar moléculas. Estas moléculas pueden combinarse más para formar organismos relativamente complejos.

Si necesita un componente base que no existe, lo crea. Entonces puedes hacer otros componentes menos específicos con él. por ejemplo:

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

Luego use en CustomTexttodas partes en lugar de Text. También puede hacerlo con View, div, spano cualquier otra cosa.

Archivo CSS externo main.css

'use strict';

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

module.exports = StyleSheet.create({

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

crear una instancia de archivo css en el componente.

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

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

Aquí puede encontrar una forma elegante de ordenar sus estilos y luego importarlos a los diferentes componentes, puede crear una carpeta en la que recopile todos los archivos de estilos y cree un index.js que funcionará como fachada:

el index.js se verá así:

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

export { Variables, GlobalStyles };

y luego importar así:

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

Aquí para más información:

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

Eche un vistazo a Temas de Shoutem para React Native.

Esto es lo que obtienes con el tema Shoutem:

Estilo global donde cierto estilo se aplica automáticamente al componente por su nombre de estilo:

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

Activando cierto estilo de componente específico con styleName(como clase CSS):

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

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

Herencia de estilo automática:

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 anidado para componentes compuestos:

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 que funcione, debe usar StyleProviderel componente contenedor que proporciona estilo a todos los demás componentes a través del contexto. Similar a ReduxStoreProvider .

También necesita conectar su componente al estilo connectStylepara que siempre use el componente conectado. Similar a Redux connect.

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

Puede ver un ejemplo en la documentación.

Una última cosa, también hemos proporcionado un conjunto de componentes en nuestro UI ToolKit que ya están conectados al estilo, por lo que puede importarlos y diseñar en su estilo / tema global.