मैंने flex: 1 का उपयोग करके पूरी स्क्रीन को काले रंग से भरने की कोशिश की। लेकिन परिणाम इस प्रकार है

resuls in iphone simulator

result in my android devices

  <View
    style={{
      flex: 1,
      backgroundColor: 'black',
    }}
  />

मैंने इसका उपयोग करने का भी प्रयास किया है:

   height: '100%',
   width: '100%',

तथा

const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;

लेकिन परिणाम अभी भी वही है।

क्या पूरी स्क्रीन को पूरी तरह भरने का कोई तरीका है?

0
Raihan 3 मार्च 2020, 08:31
ऐसा इसलिए है क्योंकि आप notch . के साथ डिवाइस का उपयोग कर रहे हैं
 – 
Karan Mehta
3 मार्च 2020, 08:36
आप और क्या क्षेत्र कवर करना चाहते हैं?
 – 
Gaurav Roy
3 मार्च 2020, 08:37
मेरे एंड्रॉइड डिवाइस notch . का उपयोग नहीं करते हैं
 – 
Raihan
3 मार्च 2020, 08:39
ध्यान दें कि स्क्रीन के ऊपर, दाएँ, नीचे और दाएँ कुछ सफ़ेद रंग अभी भी मौजूद हैं
 – 
Raihan
3 मार्च 2020, 08:40
फिर एंड्रॉइड डिवाइस की तस्वीर भी अपलोड करें
 – 
Karan Mehta
3 मार्च 2020, 08:42

6 जवाब

आप उपयोगकर्ता Dimensions.get('window') को स्क्रीन की पूरी ऊंचाई और चौड़ाई प्राप्त कर सकते हैं।

एक स्थिरांक घोषित करें

const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;

फिर इस अंदरूनी शैली का प्रयोग करें

style = {{
            height = HEIGHT,
            width = WIDTH,
            backgroundColor = 'black',
        }} 
0
user12551649 3 मार्च 2020, 08:42
मैंने इस विधि का उपयोग करने की कोशिश की है लेकिन परिणाम वही हैं
 – 
Raihan
3 मार्च 2020, 08:46

क्या आप अपने ऐप को सुरक्षित क्षेत्र दृश्य के अंदर लपेट रहे हैं, वैसे भी आप पूरी स्क्रीन को भरने के लिए प्रतिशत चौड़ाई और ऊंचाई का उपयोग कर सकते हैं यदि फ्लेक्स: 1 काम नहीं कर रहा है।

style = {{ width:'100%', height:'100%' }}
1
Imjaad 3 मार्च 2020, 08:46
मैंने आपके सुझाव की कोशिश की है और परिणाम अभी भी वही है। और अगर मैं गलत हूं तो मुझे सुधारें, क्या क्षेत्र दृश्य केवल IOS 11 या इसके बाद के संस्करण के लिए काम नहीं करता है?
 – 
Raihan
3 मार्च 2020, 10:08

यदि आपने पैरेंट व्यू की पैडिंग दी है, तो उसे हटा दें। हो सकता है कि यह काम करे और आपका रेंडर फंक्शन इस तरह होना चाहिए।

render() {
  return (
   <View style={{ flex: 1, backgroundColor: 'black'}} />
  )
}
0
Dhananjay Patel 3 मार्च 2020, 08:56
जैसा कि आप ऊपर देख सकते हैं मेरे कोड में कोई पैडिंग नहीं है।
 – 
Raihan
3 मार्च 2020, 08:58
रेंडर () {रिटर्न (<देखें स्टाइल = {{फ्लेक्स: 1, बैकग्राउंड कलर: 'ब्लैक',}} />); }
 – 
Raihan
3 मार्च 2020, 09:02
यह सचमुच आपके साथ समान है
 – 
Raihan
3 मार्च 2020, 09:03

पहला आयात:

import { StatusBar } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

अपना लेआउट इसमें बदलें:

<StatusBar backgroundColor="black" barStyle="white-content"/>
<SafeAreaView 
    style={{
        flex: 1,
        backgroundColor: 'black',
    }}
>
      <View>...</View>
</SafeAreaView>
1
Ayan 3 मार्च 2020, 09:01

अगर आप प्रतिक्रिया नेविगेशन का उपयोग कर रहे हैं तो इसे आजमाएं

const ReactNavigation = require('react-navigation');
ReactNavigation.SafeAreaView.setStatusBarHeight(0);

या

navigationOptions: {
  headerForceInset: {top: 'never'},
}
0
Mayank Jain 3 मार्च 2020, 12:42

मेरे पास भी इसी तरह की समस्या थी। लेकिन मेरे मामले में, मैंने App.js (विशेष रूप से वापसी () सत्र) और अन्य संबंधित फाइलों में View to SafeAreaView को संशोधित करके समस्या का समाधान किया है।

0
Ryan 15 अक्टूबर 2021, 12:50