স্থানীয় গ্লোবাল শৈলীর প্রতিক্রিয়া জানান

Question 1

আমি প্রতিক্রিয়া সহ নতুন এবং আমি উপাদানগুলির ভিত্তিক, ইনলাইন শৈলীর সুবিধাগুলি বুঝতে পারি। তবে আমি ভাবছি যে কোনও ধরণের বিশ্বব্যাপী শৈলীর কোনও শালীন উপায় আছে কিনা। উদাহরণস্বরূপ, আমি আমার অ্যাপ্লিকেশন জুড়ে একই পাঠ্য এবং বাটন রঙিন ব্যবহার করতে চাই।

প্রতিটি উপাদানগুলিতে পুনরাবৃত্তি করার পরিবর্তে (এবং পরে প্রয়োজনে এটি x জায়গায় পরিবর্তন করতে হবে), আমার প্রাথমিক চিন্তাটি এটির নিজস্ব ফাইলে একটি 'বেস' স্টাইলশিট শ্রেণি তৈরি করা এবং এটি আমার উপাদানগুলিতে আমদানি করা।

এর চেয়ে ভাল বা আরও বেশি কিছু 'প্রতিক্রিয়া' আছে?

Question 2

আপনি পুনরায় ব্যবহারযোগ্য স্টাইলশিট তৈরি করতে পারেন। উদাহরণ:

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>

Question 3

আপনার শৈলীর জন্য একটি ফাইল তৈরি করুন (আইই, Style.js)।

এখানে একটি উদাহরণ:

import { StyleSheet } from 'react-native';

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

আপনার স্টাইলটি ব্যবহার করতে চাইলে যে কোনও ফাইলের মধ্যে নিম্নলিখিতটি যুক্ত করুন:

import styles from './Style'

Question 4

আপনি বৈশ্বিক স্টাইলিং ভেরিয়েবল সমর্থন করে দেশীয়-প্রসারিত-স্টাইলশিটটিও আবার ব্যবহার করতে পারেন:

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

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

Question 5

আপনি যদি কিছু বৈশ্বিক চলক সেট করতে চান তবে আপনি চেষ্টা করতে পারেন।

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

Question 6

আপনার অবশ্যই স্টাইলস.জেএস এর মতো সমস্ত স্টাইল সংরক্ষণ করার জন্য একটি ফাইল তৈরি করতে হবে এবং আপনার প্রয়োজন মতো সিএসএস টাইপ কোড লিখতে হবে

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

Question 7

আমার লাইব্রেরিটি -দেশীয়-স্টাইল-টাচিয়োনগুলি ব্যবহার করে দেখুন , যা আপনাকে কেবল বৈশ্বিক স্টাইলই দেয় না, তবে আপনার মূল ফন্টসাইজের সাথে সম্পর্কিত প্রস্থ এবং উচ্চতা সহ একটি নকশা-প্রথম, প্রতিক্রিয়াশীল বিন্যাস ব্যবস্থা দেয়।

Question 8

এই সমস্ত পদ্ধতিগুলি সরাসরি প্রশ্নের উত্তর দেয় তবে আমি যতটা উদ্বিগ্ন, এটি প্রতিক্রিয়া মত একটি উপাদান ভিত্তিক ডিজাইনের সিস্টেমে এটি করার উপায় নয়।

আমরা পারমাণবিক উপাদান দিয়ে শুরু করতে পারি, তারপরে স্তর এবং তাদের শীর্ষে গোছাতে পারি। নিম্নলিখিত নিবন্ধটি চিন্তার এই ট্রেনকে আরও স্পষ্ট করে তুলতে পারে: 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বা অন্য কিছু।

Question 9

বাহ্যিক সিএসএস ফাইল 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>

Question 10

এখানে আপনি আপনার শৈলীর বাছাই করার জন্য একটি দুর্দান্ত উপায় খুঁজে পেতে পারেন এবং তারপরে বিভিন্ন উপাদানগুলিতে আমদানি করতে পারেন, আপনি এমন একটি ফোল্ডার তৈরি করতে পারেন যাতে আপনি সমস্ত শৈলীর ফাইল সংগ্রহ করেন এবং সূচক হিসাবে কাজ করতে যাওয়া সূচক.জেএস তৈরি করতে পারেন:

সূচি.জেএস দেখতে পাবেন:

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

export { Variables, GlobalStyles };

এবং তারপরে এভাবে আমদানি করুন:

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

আরও তথ্যের জন্য এখানে:

https://thoughtbot.com/blog/st संरचना-for-styling-in-react-native

Question 11

আমি অনুরূপ ব্যবহার করে আমার কাজ পেয়েছিলাম

'কনস্ট্যান্টস' নামে একটি ডিরেক্টরি তৈরি করুন ./constants/AppStyles.js এ একটি ফাইল তৈরি করুন

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

তারপরে App.js এ এই ফাইলটি এবং তৈরি করা শৈলীর উল্লেখ করে।

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;

ফাঁদে পড়েছি আমি

'./Constants/AppStyles' থেকে আমদানি করা 'AppStyles around কাছাকাছি আমার কোঁকড়া ধনুর্বন্ধনী ছিল; ভুল :-(
আমি একটি উপাদান হিসাবে অ্যাপস্টাইল তৈরি করেছি এবং একটি কনস্ট র্যান্ট রফতানি করার চেষ্টা করেছি :-)

অনলাইনে একটি ভাল কোর্স খুঁজে পেয়েছেন এবং সেখান থেকে এটি বের করেছেন

Question 12

নেটিভ রিএটিভ নেটিমের জন্য শাউটেম থিমগুলি একবার দেখুন ।

শৌতম থিমটি দিয়ে আপনি এখানে যা পান:

গ্লোবাল স্টাইল যেখানে নির্দিষ্ট স্টাইলটি স্টাইলের নাম অনুসারে স্বয়ংক্রিয়ভাবে উপাদানগুলিতে প্রয়োগ করা হয়:

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, মোড়কের উপাদান যা প্রসঙ্গের মাধ্যমে অন্যান্য সমস্ত উপাদানকে শৈলী সরবরাহ করে। রেডাক্সের মতো StoreProvider।

এছাড়াও আপনার নিজের উপাদানটিকে স্টাইলের সাথে connectStyleসংযুক্ত করতে হবে যাতে আপনি সর্বদা সংযুক্ত উপাদানটি ব্যবহার করেন। রেডাক্সের মতো connect।

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

আপনি ডকুমেন্টেশনের মধ্যে উদাহরণ দেখতে পারেন।

একটি শেষ কথা, আমরা আমাদের ইউআই টুলকিটে এমন কিছু উপাদান সরবরাহ করেছি যা ইতিমধ্যে স্টাইলের সাথে সংযুক্ত রয়েছে, তাই আপনি কেবল তাদের বিশ্বব্যাপী শৈলী / থিমে সেগুলি এবং স্টাইল আমদানি করতে পারেন।