रिएक्टिव नेटिव ग्लोबल स्टाइल

Question

मैं रिएक्ट के साथ नया हूं और मैं घटक आधारित, इनलाइन शैलियों के लाभों को समझता हूं। लेकिन मैं सोच रहा हूं कि किसी प्रकार की वैश्विक शैली के लिए एक सभ्य तरीका है। उदाहरण के लिए, मैं अपने पूरे ऐप में एक ही टेक्स्ट और बटन कलरिंग का उपयोग करना चाहूंगा।

हर घटक में दोहराए जाने के बजाय (और बाद में इसे एक्स स्थानों में बदलना होगा यदि आवश्यकता हो), मेरा प्रारंभिक विचार यह है कि इसमें एक 'आधार' स्टाइलशीट क्लास बनाई जाए और इसे अपने घटकों में आयात किया जाए।

क्या कोई बेहतर या अधिक 'रिएक्ट' तरीका है?

Answer 1

आप एक पुन: प्रयोज्य स्टाइलशीट बना सकते हैं। उदाहरण:

style.js

'use strict';

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

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

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

});

आपके घटक में:

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

...फिर:

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

Comments

हां, यह वही है जो मैंने वर्णित किया है। इस पुष्टि के लिए धन्यवाद कि मेरे पास सही विचार था। अभी के लिए सही उत्तर के रूप में चिह्नित करेगा।

— पेटम

अब आप बस इस्तेमाल कर सकते हैंimport { StyleSheet } from 'react-native';

— LYu

मैंने वैश्विक शैली प्राप्त करने के एक अलग तरीके को समझाते हुए उत्तर जोड़ा है, आप एक स्टैकओवरफ़्लो . com/questions/30853178/react-native-global-styles/… लेना चाह सकते हैं । यह कहीं अधिक लचीला और प्रतिक्रियाशील है क्योंकि यह स्थिर परिभाषा से बचता है।

— श्री ब्र।

मैं असहमत हूं, यह डीआरवाई नहीं है और रिएक्ट पारिस्थितिक तंत्र के भीतर भी इस तरह के घटक आधारित डिजाइन (या वास्तुकला) की सिफारिश नहीं की गई है। डिफ़ॉल्ट स्टाइल के साथ प्रत्येक घटक को style={defaultStyle}जोड़ना होगा। इसके बजाय, आप एक ऐसा बना सकते हैं DefaultViewऔर उसका उपयोग कर सकते हैं बजाए इसके viewकि आपके विनिर्देशन को स्टाइल किया गया है। मैंने कुछ समय पहले इस विधि का विवरण देते हुए लिखा: stackoverflow.com/a/52429040/5243543

— ThaJay

Answer 2

अपनी शैलियों (IE Style.js) के लिए एक फ़ाइल बनाएँ ।

यहाँ एक उदाहरण है:

import { StyleSheet } from 'react-native';

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

आप अपनी शैली का उपयोग करना चाहते हैं किसी भी फाइल में, निम्नलिखित जोड़ें:

import styles from './Style'

Comments

मुझे संदेह है कि यह उत्तर अब अधिक प्रासंगिक है!

— खलनायकोस

'./Styles' होना चाहिए './Style' फ़ाइल नाम से मेल खाने के लिए स्टाइल। Js

— oOEric

डुप्लीकेट उत्तर stackoverflow.com/a/30858201/5243543

— ThaJay

Answer 3

यदि आप कुछ वैश्विक चर निर्धारित करना चाहते हैं तो आप कोशिश कर सकते हैं।

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

Comments

AppStyles.js में आयात की आवश्यकता नहीं है, लेकिन यह तब होता है जब आप बस कुछ सरल वैश्विक स्टाइल चर चाहते हैं!

— १०:१० बजे

डुप्लीकेट उत्तर stackoverflow.com/a/30858201/5243543

— ThaJay

Answer 4

आप वैश्विक स्टाइल चर का समर्थन करने वाली प्रतिक्रिया-मूल-विस्तारित-स्टाइलशीट भी आज़मा सकते हैं :

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

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

Comments

एक आकर्षण की तरह काम करें;)

— EQuimper

Answer 5

आपको इसमें सभी शैलियों को संग्रहीत करने के लिए एक फ़ाइल बनानी होगी, जैसे ' स्टाइल.जेएस ' और सीएसएस टाइप कोड को आवश्यकतानुसार लिखें

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

});

और अब आप वैश्विक शैली का उपयोग कर सकते हैं जैसा कि आप देख सकते हैं

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

Comments

डुप्लीकेट उत्तर stackoverflow.com/a/30858201/5243543

— ThaJay

Answer 6

मेरे पुस्तकालय को प्रतिक्रिया-मूल-शैली-टैचीनों के लिए आज़माएं , जो न केवल आपको वैश्विक शैली देता है, बल्कि आपके रूट के सापेक्ष चौड़ाई और ऊंचाइयों के साथ एक डिज़ाइन-प्रथम, उत्तरदायी लेआउटिंग सिस्टम।

Comments

यह दिलचस्प है! पहली नज़र में, यह अजीब लग रहा था, लेकिन जब मैं इसके बारे में सोचता हूं, और कम कोड पर विचार करता हूं जिसे मुझे लिखना होगा, यह बहुत अच्छा लगता है।

— निकल्स

मुझे खुशी है कि यह आपके लिए काम करता है। आप विशेष रूप से रिक्ति पैमाने की सराहना करना सीखेंगे। यदि आपको सहायता की आवश्यकता हो, तो बेझिझक पहुंचें।

— फेबियन ज़ींड्ल

अगर आप NPM पर मेरे पैकेज को स्टार कर सकते हैं, तो मुझे पसंद आएगा : npmjs.com/package/react-native-style-tachyons , इसका कारण यह है कि मेरे पास इसका एक संक्षिप्त संस्करण ऑनलाइन भी है, जो वर्तमान में उच्च स्थान पर है। सितारों की वजह से।

— फेबियन ज़ेन्डल

हाय फैबियन, क्या यह संभव है कि डिफ़ॉल्ट शैली स्वचालित रूप से कुछ तत्वों पर लागू हो, पाठ कहो? क्या आप इसका एक उदाहरण दे सकते हैं? मुझे नहीं लगता कि ओपी हर तत्व के लिए शैली = निर्दिष्ट करना चाहता था, लेकिन ऐसा लगता है कि वे इसके लिए तैयार हो गए हैं।

— माइकल रिबन्स

मेरे पुस्तकालय के साथ नहीं, नहीं।

— फेबियन ज़िन्दल

Answer 7

ये सभी विधियाँ सीधे प्रश्न का उत्तर देती हैं लेकिन जहाँ तक मेरा सवाल है, यह प्रतिक्रिया जैसे घटक आधारित डिज़ाइन प्रणाली में ऐसा करने का तरीका नहीं है।

हम परमाणु घटकों से शुरू कर सकते हैं, फिर उन्हें परत कर सकते हैं और उन्हें शीर्ष तक पहुंचा सकते हैं। निम्नलिखित लेख विचार की इस ट्रेन को और अधिक स्पष्ट कर सकता है: http://atomicdesign.bradfrost.com/chapter-2/

प्राकृतिक दुनिया में, परमाणु तत्व मिलकर अणु बनाते हैं। ये अणु अपेक्षाकृत जटिल जीवों को बनाने के लिए आगे गठबंधन कर सकते हैं।

यदि आपको एक आधार घटक की आवश्यकता है जो मौजूद नहीं है, तो आप इसे बनाते हैं। फिर आप इसके साथ अन्य, कम विशिष्ट घटक बना सकते हैं। उदाहरण के लिए:

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

तब का उपयोग CustomTextहर जगह के बजाय Text। तुम भी साथ यह कर सकते हैं View, div, spanया कुछ और।

Comments

@ यह व्यक्तिगत घटकों के लिए कुल समझ में आता है, लेकिन आप सभी स्क्रीन पर शैली कैसे लागू करेंगे? Asp.net मास्टर पृष्ठों की तरह कुछ: quanzhanketang.com/aspnet/aspnet_masterpages.html

— mxmissile

क्या आपने अंतिम वाक्य पढ़ा? यह हर जगह के <Text />साथ बदलने के रूप में आसान <CustomText />है। आप कस्टम टेक्स्ट को टेक्स्ट के रूप में भी आयात कर सकते हैं ताकि आपको केवल आयात को बदलना पड़े।

— 13

Answer 8

बाहरी CSS फ़ाइल main.css

'use strict';

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

module.exports = StyleSheet.create({

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

घटक में सीएसएस फ़ाइल का उदाहरण बनाएँ।

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

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

Comments

डुप्लीकेट उत्तर stackoverflow.com/a/30858201/5243543

— ThaJay

Answer 9

यहां आप अपनी शैलियों को क्रमबद्ध करने के लिए एक सुंदर तरीका खोज सकते हैं और फिर विभिन्न घटकों में आयात कर सकते हैं। आप एक फ़ोल्डर बना सकते हैं जिसमें आप सभी शैलियों की फाइलें इकट्ठा करते हैं और बनाते हैं और index.js करते हैं जो मुखौटा के रूप में काम करने जा रहा है:

index.js जैसा दिखेगा:

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

export { Variables, GlobalStyles };

और फिर इस तरह आयात करें:

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

अधिक जानकारी के लिए यहां देखें:

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

Answer 10

रिएक्ट नेटिव के लिए Shoutem थीम्स पर एक नज़र डालें ।

यहाँ आपको Shoutem थीम के साथ क्या मिलेगा:

वैश्विक शैली जहां कुछ शैली स्वचालित रूप से अपने शैली नाम से घटक पर लागू होती है:

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

कुछ घटक विशिष्ट शैली को सक्रिय करना styleName(जैसे सीएसएस वर्ग):

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

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

स्वचालित शैली विरासत:

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>

रचित घटकों के लिए नेस्टेड शैली:

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

यह काम करने के लिए आपको उपयोग करने की आवश्यकता है StyleProvider, रैपर घटक जो संदर्भ के माध्यम से अन्य सभी घटक को शैली प्रदान करता है। Redux के समान StoreProvider।

इसके अलावा, आपको अपने घटक को शैली से जोड़ने की आवश्यकता है connectStyleताकि आप हमेशा जुड़े घटक का उपयोग करें। Redux के समान connect।

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

आप प्रलेखन के भीतर उदाहरण देख सकते हैं।

एक आखिरी बात, हमने अपने UI टूलकिट में घटकों के सेट भी प्रदान किए हैं जो पहले से ही शैली से जुड़े हुए हैं, इसलिए आप उन्हें केवल अपनी वैश्विक शैली / थीम में आयात कर सकते हैं।