प्रतिक्रियात्मक सुरक्षितअरे देखें पृष्ठभूमि रंग - स्क्रीन के ऊपर और नीचे के लिए दो अलग पृष्ठभूमि रंग कैसे असाइन करें?

Question

मैं प्रतिक्रिया मूल 0.50.1 से SafeAreaView का उपयोग कर रहा हूं और यह एक भाग को छोड़कर बहुत अच्छा काम कर रहा है। मैंने नारंगी पृष्ठभूमि रंग को SafrAreaView में असाइन किया है लेकिन नीचे असुरक्षित क्षेत्र पृष्ठभूमि को काले रंग में बदलने के लिए नहीं पता लगा सकता है।

यहां कोड है और मैंने परिणाम और वास्तविक परिणाम की उम्मीद भी शामिल की है। नारंगी के बजाय स्क्रीन का निचला हिस्सा बनाने का सबसे अच्छा तरीका क्या है?

import { 
 
    ... 
 
    SafeAreaView 
 
} from 'react-native'; 
 
class Main extends React.Component { 
 
    render() { 
 
    return (
 
     <SafeAreaView style={styles.safeArea}> 
 
     <App /> 
 
     </SafeAreaView> 
 
    ) 
 
    } 
 
} 
 
const styles = StyleSheet.create({ 
 
    ..., 
 
    safeArea: { 
 
    flex: 1, 
 
    backgroundColor: '#FF5236' 
 
    } 
 
})

मैं नारंगी शीर्ष और काले नीचे करना चाहते हैं।

लेकिन नीचे मैं अब क्या मिलता है।

Answer 1

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

import { 
 
    ... 
 
    SafeAreaView, 
 
    View 
 
} from 'react-native'; 
 
class Main extends React.Component { 
 
    render() { 
 
    return (
 
     <SafeAreaView style={styles.safeArea}> 
 
     <App /> 
 
     <View style={styles.fixBackground} /> 
 
     </SafeAreaView> 
 
    ) 
 
    } 
 
} 
 
const styles = StyleSheet.create({ 
 
    ..., 
 
    safeArea: { 
 
    flex: 1, 
 
    backgroundColor: '#FF5236' 
 
    }, 
 
    fixBackground: { 
 
    backgroundColor: 'orange', 
 
    position: 'absolute', 
 
    bottom: 0, 
 
    right: 0, 
 
    left: 0, 
 
    height: 100, 
 
    zIndex: -1000, 
 
    } 
 
})

Answer 2

• हो सकता है कि उपयोगी है, मैं इस प्रश्न के लिए, लेकिन दृष्टिकोण नीचे समाधान की कोशिश की मेरे मामले में सबसे उपयुक्त था।

• कुछ विचार/कंटेनरों की पृष्ठभूमि छवि थी।

• मेरे मामले में, मैंने आईफोन एक्स स्क्रीन के आकार का उपयोग करने का फैसला किया।

• एप्लिकेशन केवल पोर्ट्रेट मोड के लिए डिज़ाइन किया गया था।

• आईफोन एक्स के लिए डिवाइस & डिवाइस का पता लगाया गया शीर्ष & नीचे तत्वों को समायोजित किया गया।

• यह दृष्टिकोण iPhone एक्स

  isIPhoneX =() => { 
       const X_HEIGHT = 812, X_WIDTH = 375; 
       const {"height": D_HEIGHT, "width": D_WIDTH} = Dimensions.get("window"); 
  
       return Platform.OS === "ios" && 
        (D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH || 
        D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT); 
  
      }