React Native gaya global

Saya baru mengenal React dan saya memahami manfaat gaya inline berbasis komponen. Tapi saya bertanya-tanya apakah ada cara yang layak untuk memiliki semacam gaya global. Misalnya, saya ingin menggunakan pewarnaan Teks dan Tombol yang sama di seluruh aplikasi saya.

Daripada mengulang di setiap komponen (dan kemudian harus mengubahnya di tempat x jika perlu), pemikiran awal saya adalah membuat kelas StyleSheet 'dasar' di file itu sendiri dan mengimpornya ke komponen saya.

Apakah ada cara 'React' yang lebih baik atau lebih?

Anda dapat membuat lembar gaya yang dapat digunakan kembali. Contoh:

style.js

'use strict';

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

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

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

});

Di komponen Anda:

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

...kemudian:

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

Buat file untuk gaya Anda (IE, Style.js).

Berikut ini contohnya:

import { StyleSheet } from 'react-native';

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

Di salah satu file yang ingin Anda gunakan gaya Anda, tambahkan yang berikut ini:

import styles from './Style'

Jika Anda hanya ingin mengatur beberapa variabel global, Anda dapat mencoba.

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

Anda juga dapat mencoba react-native-extended-stylesheet yang mendukung variabel gaya global:

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

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

Anda harus membuat file untuk menyimpan semua gaya di dalamnya seperti ' styles.js ' dan menulis kode jenis css sesuai kebutuhan

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

});

dan sekarang Anda dapat menggunakan gaya global seperti yang Anda lihat

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

Coba perpustakaan saya react-native-style-tachyons , yang tidak hanya memberi Anda gaya global, tetapi juga sistem tata letak responsif yang mengutamakan desain dengan lebar dan tinggi relatif terhadap ukuran font root Anda.

Semua metode ini secara langsung menjawab pertanyaan tetapi sejauh yang saya ketahui, ini bukanlah cara melakukannya dalam sistem desain berbasis komponen seperti React.

Kita bisa mulai dengan komponen atom, lalu melapisi dan mengelompokkannya sampai ke atas. Artikel berikut mungkin membuat alur pemikiran ini lebih jelas: http://atomicdesign.bradfrost.com/chapter-2/

Di alam, elemen atom bergabung bersama untuk membentuk molekul. Molekul-molekul ini dapat bergabung lebih lanjut untuk membentuk organisme yang relatif kompleks.

Jika Anda membutuhkan komponen dasar yang tidak ada, Anda membuatnya. Kemudian Anda dapat membuat komponen lain yang kurang spesifik dengannya. misalnya:

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

Kemudian gunakan di CustomTextmana saja, bukan Text. Anda juga dapat melakukannya dengan View, div, spanatau apa pun.

File CSS eksternal main.css

'use strict';

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

module.exports = StyleSheet.create({

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

membuat contoh file css dalam komponen.

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

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

Di sini Anda dapat menemukan cara yang elegan untuk mengurutkan gaya Anda dan kemudian mengimpornya ke berbagai komponen, Anda dapat membuat folder tempat Anda mengumpulkan semua file gaya dan membuat dan index.js yang akan berfungsi sebagai fasad:

index.js akan terlihat seperti:

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

export { Variables, GlobalStyles };

lalu impor seperti ini:

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

Disini untuk informasi lebih lanjut:

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

Lihatlah Tema Shoutem untuk React Native.

Inilah yang Anda dapatkan dengan Tema Shoutem:

Gaya global di mana gaya tertentu secara otomatis diterapkan ke komponen dengan nama gayanya:

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

Mengaktifkan gaya khusus komponen tertentu dengan styleName(seperti kelas CSS):

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

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

Pewarisan gaya otomatis:

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>

Gaya bersarang untuk komponen yang disusun:

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

Untuk membuatnya bekerja, Anda perlu menggunakan StyleProvider, komponen pembungkus yang menyediakan gaya ke semua komponen lain melalui konteks. Mirip dengan Redux StoreProvider.

Anda juga perlu menghubungkan komponen Anda ke gaya connectStylesehingga Anda selalu menggunakan komponen yang terhubung. Mirip dengan Redux connect.

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

Anda dapat melihat contoh dalam dokumentasi.

Satu hal terakhir, kami juga telah menyediakan sekumpulan komponen di UI ToolKit kami yang sudah terhubung ke gaya, jadi Anda bisa mengimpornya dan gaya dalam gaya / tema global Anda.