Yerel küresel stillere tepki verin

React'te yeniyim ve bileşen tabanlı, satır içi stillerin faydalarını anlıyorum. Ama bir tür küresel tarza sahip olmanın iyi bir yolu olup olmadığını merak ediyorum. Örneğin, uygulamamda aynı Metin ve Düğme rengini kullanmak istiyorum.

Her bileşende tekrarlamak yerine (ve daha sonra gerekirse x yerde değiştirmek zorunda kalırsınız), ilk düşüncem kendi dosyasında bir 'temel' StyleSheet sınıfı oluşturmak ve onu bileşenlerime aktarmaktır.

Daha iyi veya daha fazla 'Tepki' yolu var mı?

Yeniden kullanılabilir bir stil sayfası oluşturabilirsiniz. Misal:

style.js

'use strict';

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

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

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

});

Bileşeninizde:

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

...sonra:

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

Stilleriniz için bir dosya oluşturun (IE, Style.js).

İşte bir örnek:

import { StyleSheet } from 'react-native';

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

Tarzınızı kullanmak istediğiniz dosyalardan herhangi birine aşağıdakileri ekleyin:

import styles from './Style'

Eğer sadece bazı global değişkenler ayarlamak istiyorsanız deneyebilirsiniz.

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

Global stil değişkenlerini destekleyen react-native-genişletilmiş stil sayfasını da deneyebilirsiniz :

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

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

Tüm stilleri içinde depolamak için ' styles.js ' gibi bir dosya oluşturmalı ve ihtiyaç duyduğunuzda css türü kodunu yazmalısınız.

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

});

ve şimdi gördüğünüz gibi global stili kullanabilirsiniz

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

Kitaplığımı react-native-style-tachyons'u deneyin , bu size sadece global stiller vermekle kalmaz, aynı zamanda kök yazı tipi boyutunuza göre genişlikleri ve yükseklikleri olan tasarıma öncelik veren, duyarlı bir mizanpaj sistemi.

Tüm bu yöntemler soruyu doğrudan yanıtlıyor ama bana kalırsa, bunu React gibi bileşen tabanlı bir tasarım sisteminde yapmanın yolu bu değil.

Atomik bileşenlerle başlayabiliriz, sonra onları en üste kadar katmanlayabilir ve gruplayabiliriz. Aşağıdaki makale bu düşünce zincirini daha açık hale getirebilir: http://atomicdesign.bradfrost.com/chapter-2/

Doğal dünyada, atomik elementler moleküller oluşturmak için birleşir. Bu moleküller, nispeten karmaşık organizmalar oluşturmak için daha fazla birleşebilir.

Var olmayan bir temel bileşene ihtiyacınız varsa, onu yaparsınız. O zaman onunla daha az spesifik başka bileşenler yapabilirsiniz. Örneğin:

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

O zaman CustomTextyerine her yerde kullanın Text. Ayrıca ile yapabilirsiniz View, div, spanbaşka ya da bir şey.

Harici CSS dosyası main.css

'use strict';

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

module.exports = StyleSheet.create({

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

Bileşende css dosyası örneği oluşturun.

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

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

Burada stillerinizi sıralamanın ve ardından farklı bileşenlere aktarmanın zarif bir yolunu bulabilir, tüm stil dosyalarını topladığınız ve cephe olarak çalışacak olan index.js'yi oluşturup oluşturacağınız bir klasör oluşturabilirsiniz:

index.js şöyle görünecektir:

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

export { Variables, GlobalStyles };

ve sonra şu şekilde içe aktarın:

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

Daha fazla bilgi için:

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

Benimkini benzer kullanarak çalıştırdım

'Sabitler' adlı bir dizin oluşturun ./constants/AppStyles.js'de bir dosya oluşturun

 /**
 * Project level stylesheet for common styles
 */


import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    margin: 20,
    alignItems: 'center',
    alignContent: 'center',
    paddingVertical: 60
  }
  
});

Ardından, App.js'de bu dosyaya ve oluşturulan stillere bakın.

import React from 'react';
import {
  View,
  Text
} from 'react-native';
import AppStyles from './constants/AppStyles';

const App = () => {
  return (
    <View style={ AppStyles.container }>
      <Text>MOST BASIC Template EVER!</Text>
    </View>
  );
};

export default App;

Düştüğüm tuzaklar

• './Constants/AppStyles'dan içe aktarım {AppStyles} etrafında kaşlı ayraçlar vardı; YANLIŞ :-(
• AppStyles'ı bir bileşen olarak oluşturdum ve sabit bir YANLIŞ dışa aktarmayı denedim :-)

İnternette iyi bir kurs buldum ve oradan çözdüm

React Native için Shoutem Temalarına bir göz atın .

Shoutem Teması ile elde ettiğiniz şeyler:

Belirli stilin, stil adına göre bileşene otomatik olarak uygulandığı global stil:

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

Belirli bileşene özgü stili styleName(CSS sınıfı gibi) ile etkinleştirmek :

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

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

Otomatik stil mirası:

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>

Oluşturulan bileşenler için iç içe stil:

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

Çalışmasını sağlamak için StyleProvider, bağlam yoluyla diğer tüm bileşenlere stil sağlayan sarmalayıcı bileşenini kullanmanız gerekir . Redux'a benzer StoreProvider.

Ayrıca bileşeninizi stile bağlamanız gerekir, connectStyleböylece her zaman bağlı bileşen kullanırsınız. Redux'a benzer connect.

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

Belgelerde örnek görebilirsiniz.

Son bir şey de, UI ToolKit'imizde zaten stile bağlı olan bileşenler seti sağladık , böylece bunları ve stilinizi global stilinize / temanıza aktarabilirsiniz.