अपने ऐप को स्टाइल करने के निम्नलिखित तरीके हैं:
- Stylesheet कंपोनेंट का उपयोग करना
- इनलाइन स्टाइल्स का उपयोग करना
Stylesheet कंपोनेंट का उपयोग करना
जब आप अपने ऐप पर स्टाइलिंग लागू करना चाहते हैं तो React Native Stylesheet कंपोनेंट बहुत काम आता है और साफ-सुथरा होता है। Stylesheet कंपोनेंट के साथ काम करने के लिए पहले इसे इम्पोर्ट करें जैसा कि नीचे दिखाया गया है:
import { StyleSheet } from 'react-native';
आप Stylesheet कंपोनेंट का उपयोग करके स्टाइल बना सकते हैं जैसा कि नीचे दिखाया गया है:
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
margin: 10,
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
}
});
उपरोक्त स्टाइल का उपयोग आपके कोड के अंदर निम्नानुसार किया जा सकता है:
यहाँ एक उदाहरण है जो FlatList कंपोनेंट के प्रदर्शन के लिए Stylesheet का उपयोग करता है:
उदाहरण 1
import React from "react";
import { FlatList, Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
constructor() {
super();
this.state = {
data: [
{ name: "Javascript Frameworks", isTitle: true },
{ name: "Angular", isTitle: false },
{ name: "ReactJS", isTitle: false },
{ name: "VueJS", isTitle: false },
{ name: "ReactNative", isTitle: false },
{ name: "PHP Frameworks", isTitle: true },
{ name: "Laravel", isTitle: false },
{ name: "CodeIgniter", isTitle: false },
{ name: "CakePHP", isTitle: false },
{ name: "Symfony", isTitle: false }
],
stickyHeaderIndices: []
};
}
renderItem = ({ item }) => {
return (
{item.name}
);
};
render() {
return (
item.name}
stickyHeaderIndices={this.state.stickyHeaderIndices}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
margin: 10,
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
}
});
आउटपुट
इनलाइन स्टाइल्स का उपयोग करना
आप स्टाइल प्रॉपर्टी का उपयोग करके स्टाइल्स इनलाइन जोड़ सकते हैं। हालांकि, यह बेस्ट प्रैक्टिस नहीं है क्योंकि कोड पढ़ना मुश्किल हो सकता है। यहाँ रिएक्ट नेटिव कंपोनेंट के अंदर इनलाइन स्टाइल का उपयोग कैसे करें, इसका एक कार्यशील उदाहरण है:
उदाहरण 2
export default App;
import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
return (
);
}
आउटपुट
