Cách ngăn bố cục chồng chéo với thanh trạng thái iOS

Question

Tôi đang làm việc trên tutorial để điều hướng gốc phản hồi. Tôi phát hiện ra rằng tất cả bố cục bắt đầu tải từ đầu màn hình thay vì bên dưới thanh trạng thái. Điều này khiến hầu hết các bố cục chồng lên nhau với thanh trạng thái. Tôi có thể sửa lỗi này bằng cách thêm phần đệm vào khung nhìn khi tải chúng. Đây có phải là cách thực tế để làm điều đó không? Tôi không nghĩ rằng việc thêm padding theo cách thủ công là một cách thực sự để giải quyết nó. Có cách nào thanh lịch hơn để sửa lỗi này không?

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

Dưới đây cho thấy ảnh chụp màn hình trước và sau khi phần đệm được thêm vào.

Answer 1

Có một cách rất đơn giản để khắc phục sự cố này. Tạo thành phần.

Bạn có thể tạo thành phần StatusBar và gọi nó trước tiên sau trình bao bọc lần xem đầu tiên trong các thành phần chính của bạn.

Đây là mã cho một tôi sử dụng:

'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 

Sau khi làm điều này và xuất khẩu nó vào thành phần chính của bạn, hãy gọi nó như thế này:

import StatusBarBackground from './YourPath/StatusBarBackground' 

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

 

Answer 2

Bạn có thể xử lý này bằng cách thêm một lớp đệm để bạn thành phần thanh điều hướng hay chỉ là quảng cáo một quan điểm cho rằng có Hight giống như statusbar ở phía trên cùng của cây tầm nhìn của bạn với một backgroundcolor như facebook ứng dụng thực hiện điều này.

Answer 3

@ giải pháp philipheinser thực sự làm việc.

Tuy nhiên, tôi hy vọng rằng thành phần StatusBar của React Native sẽ xử lý điều đó cho chúng tôi.

Nó không, unfortunlty, nhưng chúng ta có thể abstact đó đi quait easly bởi intoru riêng thành phần thứ tự cao của chúng tôi

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

Trước:

Sau: