आईओएस स्टेटस बार

Question

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

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> 
      ) 
    }  
} 

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

Answer 1

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

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

'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') ? 20 : 0, //this is just to test if the platform is iOS to give it a height of 20, 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> 
    ) 
    } 
} 

 

Answer 2

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

Answer 3

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

हालांकि, मैं उम्मीद करता हूं कि प्रतिक्रिया मूल StatusBar घटक हमारे लिए इसे संभालेगा।

यह नहीं, unfortunlty, लेकिन हम उस दूर easly Abstact सकता है quait हमारे अपने उच्च आदेश घटक

./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

intoru द्वारा

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> 
    ) 
} 

से पहले:

के बाद: