web-dev-qa-db-ja.com

NativeBase +指数ヘッダー

ExponentでNativeBaseを使用しています。ヘッダーは電話のステータスバーの下にあります。これは、Exponentがリリースした NativeBase デモで確認できます。

enter image description here

誰かがこれに対する修正を持っていますか？

react-nativenative-baseexponentjs
14
Molly Harper

この問題はAndroidでのみ発生するため、これを修正するための推奨される方法は、Android具体的に使用してプラットフォーム：

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

const styles = StyleSheet.create({
    container: {
            flex: 1,
            ...Platform.select({
                Android: {
                    marginTop: StatusBar.currentHeight
                }
            })

        }
})

ここで、containerはアプリのメインコンテナーです。

<View style={styles.container}>
 // rest of the code here
</View>
34
Varun Nath

最終的に、デバイスのStatusBarの値を使用してmarginTopを追加しました。

import {
  StatusBar,
} from 'react-native'

私のグローバルスタイルシートでは：

header: {
  marginTop: StatusBar.currentHeight,
}
5
Molly Harper

古い投稿ですが、最近Expoで同じ問題に直面しました。そして、app.jsonファイルにこの行を追加することで、この問題を克服しています。

"androidStatusBar"：{"backgroundColor"： "＃000000"}

app.jsonファイル

{
  "expo": {
    "name": "You App Name",    
    "androidStatusBar": {
      "backgroundColor": "#000000"
    }
  }
}

それで私の問題は解決しました。これは他の人にも役立つと思います。

1
Shahriar Hasan Sayeed

この問題の簡単な解決策は、StatusBarコンポーネントをインポートして、次のタグを使用するだけです。

<StatusBar hidden />

例えばページで：

/*
  Page with no statusbar
*/
import React, {Component} from 'react'
import {Platform, View, Text, StatusBar} from 'react-native'

export default class App extends React.Component{
  render(){
    return(
        <View>
        <StatusBar hidden />
         <Text> Hello World </Text>
        </View>
    );
  }
}

このコンポーネントは、expoおよびreact-native-cliの最新のバージョンでうまく機能します。さらにヘルプが必要な場合は、 StatusBarのReactNativeドキュメント

0
Pooya Behravesh

テーマでStyleProviderを使用してこれを処理するためのより良い方法を見つけ、次にde componentsフォルダー（native-base-theme/components）でHeader.jsファイルを見つけ、paddintTop値（約305行）を変更しました。

0
nexthor1978