web-dev-qa-db-ja.com

Reactネイティブナビゲーションのヘッダーバーのマージントップ

Reactネイティブです。React-Navigationを使用しています。ただし、デバイスでヘッダーナビゲーションに問題があります。このようなステータスバーによるオーバーレイです。

enter image description here

この問題は私のコードとReactナビゲーションショーケースの例の両方で発生します。修正方法は？おかげで

javascriptreact-nativereact-navigation
11
Pham Minh Tan

Expoを使用しているため、この動作は正常です。

static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: 24 },
}

このようにヘッダーを定義できます。

約1年後の編集：

Expoでは、これを使用できます。

import { Constants } from 'expo'

static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: Constants.statusBarHeight },
}
5
Poptocrack

エキスポを使用している場合は、このようなナビゲーションオプションを設定してみてください

navigationOptions:{
  headerStyle:{
    marginTop: (Platform.OS === 'ios') ? 0 : Expo.Constants.statusBarHeight }
  }
}

これにより、パディングはAndroidプラットフォームでのみ有効になります。詳細については、 link。 にアクセスしてください。

2
Darren Lau

これはあなたが望むことをするはずです。

import {
  StyleSheet,
  View,
  Platform
} from 'react-native';
import { Constants } from 'expo';

const App = () => (
    <View style={styles.container}>
        // Your content with margin for statusBar goes here
    </View>
)

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight
  }
}
2
Hinrich

Expoを使用している場合は、expo coreのPlatformを使用できます。

import { Constants } from "expo";
import { Platform } from "expo-core"; //inside of Platfrom from 'react-native'

その後、スタイルシートを作成します。

const styles = StyleSheet.create({
  container: {
   marginTop: Platform.OS === "ios" ? 0 : Constants.statusBarHeight
   }
});
0
MBehtemam

Expoでは、定数を使用できます。

import Constants from 'expo-constants';

const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight
  },
});

ReactNativeのStatusBarコンポーネントを使用することもできます。

import { StatusBar } from 'react-native';

const styles = StyleSheet.create({
  container: {
    marginTop: StatusBar.currentHeight
  },
});
0
pjehan