Pertanyaan Cara mencegah tata letak tumpang tindih dengan bilah status iOS


Saya sedang bekerja tutorial untuk Bereaksi Navigasi asli. Saya menemukan bahwa semua tata letak mulai memuat dari atas layar, bukan di bawah bilah status. Ini menyebabkan sebagian besar tata letak tumpang tindih dengan bilah status. Saya bisa memperbaiki ini dengan menambahkan padding ke tampilan saat memuat mereka. Apakah ini cara yang sebenarnya untuk melakukannya? Saya tidak berpikir menambahkan padding secara manual adalah cara yang sebenarnya untuk menyelesaikannya. Apakah ada cara yang lebih elegan untuk memperbaikinya?

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

Di bawah ini menunjukkan screenshot sebelum dan sesudah padding ditambahkan. before adding padding

after adding padding


32
2018-03-04 18:39


asal


Jawaban:


Ada cara yang sangat sederhana untuk memperbaikinya. Buat komponen.

Anda dapat membuat komponen StatusBar dan memanggilnya terlebih dahulu setelah pembungkus tampilan pertama di komponen induk Anda.

Berikut adalah kode untuk yang saya gunakan:

'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

Setelah melakukan ini dan mengekspornya ke komponen utama Anda, sebut saja seperti ini:

import StatusBarBackground from './YourPath/StatusBarBackground'

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


16
2018-03-05 01:39



Sekarang Anda bisa menggunakannya SafeAreaView yang termasuk dalam Navigasi Bereaksi:

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

9
2018-03-13 02:46



Solusi @philipheinser memang bekerja.

Namun, saya berharap bahwa React Native's Status bar komponen akan menangani itu untuk kita.

Itu tidak, sayangnya, tetapi kita dapat mengaburkannya dengan mudah dengan membuat komponen kita sendiri di sekitarnya:

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

Setelah:


7
2018-02-26 14:37



Anda dapat mengatasinya dengan menambahkan padding pada komponen bilah navigasi atau hanya menampilkan tampilan yang memiliki hight yang sama dengan bilah status di bagian atas pohon tampilan Anda dengan latar belakangwarna seperti aplikasi facebook yang melakukannya.


1
2018-03-04 18:52



Ok, jadi ini cara yang efektif untuk iOS:

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

1
2017-07-17 13:27