react-native - multiple - react native stylesheet

Reaccionar estilos globales nativos

Question

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 importarlo en mis componentes.

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

Answer 1

Archivo CSS externo main.css

''use strict'';

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

module.exports = StyleSheet.create({

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

crear instancia de archivo css en componente.

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

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

Answer 2

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 que desea usar su estilo, agregue lo siguiente:

import styles from ''./Style''

Answer 3

Debe crear un archivo para almacenar todo el estilo 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 puedes usar el estilo global como puedes 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>
    );
  }
}

Answer 4

Eche un vistazo a los Temas de Shoutem para React Native.

Esto es lo que obtienes con Shoutem Theme:

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

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

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

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

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

Herencia 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 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 StyleProvider , el componente contenedor que proporciona estilo a todos los demás componentes a través del contexto. Similar a Redux StoreProvider .

También debe conectar su componente al estilo con connectStyle para que siempre use el componente conectado. Similar a Redux connect .

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

Puede ver ejemplos en la documentación.

Una última cosa, también proporcionamos un conjunto de componentes en nuestro kit de herramientas de interfaz de usuario que ya están conectados al estilo, por lo que puede importarlos y diseñarlos en su estilo / tema global.

Answer 5

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

Answer 6

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

...entonces:

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

Answer 7

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

Answer 8

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

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

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

Answer 9

Todos estos métodos responden directamente a la pregunta, pero no es la forma de hacerlo. Estas personas están atrapadas en la vieja forma de pensar en el estilo de los elementos disponibles. En React haces componentes. Entonces, si necesita un componente base que no existe, lo crea. por ejemplo:

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

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

y luego use CustomText todas partes en lugar de Text . También puedes hacerlo con View , div , span o cualquier otra cosa.