रिएक्टिव नेटिव - स्टाइलिंग

रिएक्ट नेटिव में आपके तत्वों को स्टाइल करने के कुछ तरीके हैं।

आप उपयोग कर सकते हैं styleसंपत्ति इनलाइन जोड़ने के लिए। हालांकि, यह सबसे अच्छा अभ्यास नहीं है क्योंकि कोड को पढ़ना मुश्किल हो सकता है।

इस अध्याय में, हम इसका उपयोग करेंगे Stylesheet स्टाइल के लिए।

कंटेनर घटक

इस अनुभाग में, हम अपने कंटेनर घटक को हमारे पिछले अध्याय से सरल करेंगे।

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'This is my state'
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState}/>
         </View>
      );
   }
}

प्रस्तुति घटक

निम्नलिखित उदाहरण में, हम आयात करेंगे StyleSheet। फ़ाइल के नीचे, हम अपनी स्टाइलशीट बनाएंगे और उसे असाइन करेंगेstylesस्थिर। ध्यान दें कि हमारी शैली में हैंcamelCase और हम उपयोग नहीं करते हैं px या स्टाइल के लिए%।

हमारे पाठ में शैलियों को लागू करने के लिए, हमें जोड़ने की आवश्यकता है style = {styles.myText} के लिए संपत्ति Text तत्व।

PresentationalComponent.js

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text style = {styles.myState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

const styles = StyleSheet.create ({
   myState: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
   }
})

जब हम ऐप चलाते हैं, तो हमें निम्न आउटपुट प्राप्त होंगे।