प्रतिक्रिया देशी में विभिन्न स्क्रीन आकार कैसे संभालें?

Question

मैं प्रतिक्रिया-मूल पर एक आवेदन विकसित कर रहा हूं। मैंने एक यूआई बनाया है जो आईफोन 6 पर ठीक काम करता है लेकिन आईफोन 5 या निचले संस्करणों पर ठीक काम नहीं कर रहा है। मुझे इसे कैसे ठीक करना चाहिए?

Answer 1

क्या आपने निश्चित चौड़ाई और ऊंचाइयों का उपयोग करके ऐप डिज़ाइन किया है? आपको निश्चित रूप से फ्लेक्सबॉक्स की क्षमताओं का उपयोग करना चाहिए और जितनी ज्यादा हो सके सेटिंग्स को निश्चित आकार से बचने का प्रयास करना चाहिए। flex property का उपयोग यह निर्धारित करने के लिए किया जा सकता है कि <View /> को कितनी जगह दूसरों के लिए रिलीज़ का उपयोग करना चाहिए, और उस पृष्ठ पर मौजूद अन्य गुणों को तत्वों को एक लचीली तरीके से रखने के लिए उपयोग किया जा सकता है जो विभिन्न स्क्रीन आकारों की वांछित परिणाम देना चाहिए।

कभी-कभी, आपको <ScrollView /> की भी आवश्यकता हो सकती है।

जब आपको निश्चित आकार की आवश्यकता होती है, तो आप Dimensions.get('window') का उपयोग कर सकते हैं।

Answer 2

आपको स्क्रीन आकार पर भरोसा करते हुए गतिशील रूप से आकारों की गणना करने की आवश्यकता है।

import { Dimensions, StyleSheet } from 'react-native' 

[...] 

const { width, height } = Dimensions.get('window') 

[...] 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1. 
     flexDirection: 'column', 
    }, 
    myView: { 
     width: width * 0.8, // 80% of screen's width 
     height: height * 0.2 // 20% of screen's height 
    } 
}) 

आप TabbarIOS का उपयोग कर रहे हैं, तो याद रखें कि Dimensions.get('window') आप पूरे स्क्रीन की ऊंचाई देता है, इसका मतलब है कि आप खाते में लेने के लिए है कि tabbar है होगा 56. इसलिए उदाहरण के लिए की अचल ऊंचाई , जब TabbarIOS का उपयोग कर:

const WIDTH = Dimensions.get('window').width, 
     HEIGHT = Dimensions.get('window').height - 56 

फिर जैसा कि ऊपर चौड़ाई और ऊंचाई का उपयोग करें।