IOS स्थिति पट्टी के साथ ओवरलैपिंग से लेआउट को कैसे रोकें

Question 1

मैं रिएक्टिव नेटिव नेविगेशन के लिए ट्यूटोरियल पर काम कर रहा हूं । मुझे पता चला कि सभी लेआउट स्टेटस बार के नीचे स्क्रीन के ऊपर से लोड होने लगते हैं। यह अधिकांश लेआउट को स्टेटस बार के साथ ओवरलैप करने का कारण बनता है। मैं उन्हें लोड करते समय दृश्य में एक पैडिंग जोड़कर इसे ठीक कर सकता हूं। क्या ऐसा करने का वास्तविक तरीका है? मुझे नहीं लगता कि मैन्युअल रूप से पैडिंग जोड़ना इसे हल करने का एक वास्तविक तरीका है। क्या इसे ठीक करने का अधिक सुरुचिपूर्ण तरीका है?

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

export default class MyScene extends Component {
    static get defaultProps() {
            return {
                    title : 'MyScene'    
            };  
    }   
    render() {
            return (
                    <View style={{padding: 20}}> //padding to prevent overlap
                            <Text>Hi! My name is {this.props.title}.</Text>
                    </View> 
            )   
    }    
}

नीचे पैडिंग जोड़े जाने से पहले और बाद के स्क्रीनशॉट दिखाए जाते हैं।

Question 2

इसे ठीक करने का एक बहुत ही सरल तरीका है। एक घटक बनाओ।

आप एक StatusBar घटक बना सकते हैं और इसे अपने मूल घटकों में पहले दृश्य आवरण के बाद कॉल कर सकते हैं।

यहाँ मैं उपयोग करने वाले के लिए कोड है:

'use strict'
import React, {Component} from 'react';
import {View, Text, StyleSheet, Platform} from 'react-native';

class StatusBarBackground extends Component{
  render(){
    return(
      <View style={[styles.statusBarBackground, this.props.style || {}]}> //This part is just so you can change the color of the status bar from the parents by passing it as a prop
      </View>
    );
  }
}

const styles = StyleSheet.create({
  statusBarBackground: {
    height: (Platform.OS === 'ios') ? 18 : 0, //this is just to test if the platform is iOS to give it a height of 18, else, no height (Android apps have their own status bar)
    backgroundColor: "white",
  }

})

module.exports= StatusBarBackground

ऐसा करने के बाद और इसे अपने मुख्य घटक पर निर्यात करें, इसे इस तरह से कॉल करें:

import StatusBarBackground from './YourPath/StatusBarBackground'

export default class MyScene extends Component {
  render(){
    return(
      <View>
        <StatusBarBackground style={{backgroundColor:'midnightblue'}}/>
      </View>
    )
  }
}

Question 3

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

<SafeAreaView>
    ... your content ...
</SafeAreaView>

Question 4

मैंने इसके लिए और सरल तरीका आजमाया।

हम एंड्रॉइड पर स्टेटस बार की ऊंचाई प्राप्त कर सकते हैं और दोनों प्लेटफार्मों पर कोड काम करने के लिए इसके साथ SafeAreaView का उपयोग कर सकते हैं।

import { SafeAreaView, StatusBar, Platform } from 'react-native';

यदि हम लॉग आउट करते हैं Platform.OSऔर StatusBar.currentHeightहमें लॉग मिलते हैं,

console.log('Height on: ', Platform.OS, StatusBar.currentHeight);

ऊँचाई: Android 24 और ऊँचाई: Android 24

अब हम वैकल्पिक रूप से अपने कंटेनर दृश्य का उपयोग करके मार्जिन / पैडिंग जोड़ सकते हैं

paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0

App.js में अंतिम कोड नीचे है:

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
        <View style={styles.container}>
          <Text>Hello World</Text>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
  }
});

Question 5

@philipheinser समाधान वास्तव में काम करता है।

हालाँकि, मुझे उम्मीद है कि रिएक्ट नेटिव के स्टेटसबार घटक को हमारे लिए संभाल लेंगे।

यह दुर्भाग्य से नहीं है, लेकिन हम इसे आसानी से दूर कर सकते हैं कि इसके चारों ओर अपना खुद का घटक बनाकर आसानी से:

./StatusBar.js

import React from 'react';
import { View, StatusBar, Platform } from 'react-native';

// here, we add the spacing for iOS
// and pass the rest of the props to React Native's StatusBar

export default function (props) {
    const height = (Platform.OS === 'ios') ? 20 : 0;
    const { backgroundColor } = props;

    return (
        <View style={{ height, backgroundColor }}>
            <StatusBar { ...props } />
        </View>
    );
}

./index.js

import React from 'react';
import { View } from 'react-native';

import StatusBar from './StatusBar';

export default function App () {
    return (
      <View>
        <StatusBar backgroundColor="#2EBD6B" barStyle="light-content" />
        { /* rest of our app */ }
      </View>
    )
}

इससे पहले:

उपरांत:

Question 6

react-navigationडॉक्स इस के लिए एक महान समाधान है। सबसे पहले, वे प्रतिक्रियाशील मूल के साथ शामिल का उपयोग न करने की सलाह देते हैंSafeAreaView क्योंकि:

जबकि रिएक्टिव नेटिव एक सेफअरेव्यू घटक का निर्यात करता है, इसके कुछ अंतर्निहित मुद्दे हैं, अर्थात यदि सुरक्षित क्षेत्र वाली स्क्रीन एनिमेटेड है, तो यह उछल-कूद का कारण बनता है। इसके अलावा, यह घटक पुराने iOS संस्करणों या Android के लिए बिना किसी समर्थन के केवल iOS 10+ का समर्थन करता है। हम सुरक्षित क्षेत्रों को अधिक विश्वसनीय तरीके से संभालने के लिए प्रतिक्रिया-देशी-सुरक्षित-क्षेत्र-संदर्भ पुस्तकालय का उपयोग करने की सलाह देते हैं।

इसके बजाय, वे प्रतिक्रिया-मूल-सुरक्षित-क्षेत्र-संदर्भ की अनुशंसा करते हैं - जिसके साथ यह इस तरह दिखेगा:

import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';
import { useSafeArea } from 'react-native-safe-area-context';

export default function MyScene({title = 'MyScene'}) {
    const insets = useSafeArea();

    return (
        <View style={{paddingTop: insets.top}}>
            <Text>Hi! My name is {title}.</Text>
        </View> 
    )   
}

मैं यह नोट करना चाहूंगा SafeAreaViewकि यह लाइब्रेरी का उपयोग करने के लिए शायद यह एक बेहतर विचार है कि हालांकि, इन दिनों फोन में नीचे के तत्व भी हो सकते हैं जो UI तत्वों को ओवरलैप कर सकते हैं। यह सब आपके ऐप के पाठ्यक्रम पर निर्भर करता है। (उस पर अधिक विवरण के लिए, react-navigationडॉक्स मैं शुरुआत में जुड़ा हुआ देखें ।)

Question 7

यहाँ एक तरीका है जो iOS के लिए काम करता है :

<View style={{height: 20, backgroundColor: 'white', marginTop: -20, zIndex: 2}}>
   <StatusBar barStyle="dark-content"/></View>

Question 8

आप इसे नेविगेशन बार घटक में एक पैडिंग जोड़कर संभाल सकते हैं या बस एक दृश्य को देख सकते हैं जिसमें आपके दृश्य पेड़ के शीर्ष पर स्थित स्थिति पट्टी के समान हाइट है, जैसे कि बैकग्राउंडर के साथ फेसबुक ऐप ऐसा करता है।

Question 9

इस सरलता को प्राप्त करने के लिए सिंपल यूजर रिएक्ट देशी डिफ़ॉल्ट स्टेटसबार।

<View style={styles.container}>
    <StatusBar backgroundColor={Color.TRANSPARENT} translucent={true} />
    <MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={styles.map}
      region={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      }}
    />
  </View>