本机基础 header 下面有奇数纯色

Question

我正在为我的应用程序使用 react-native 和本机基础。

我最近收到这个错误，不知道它是什么时候开始发生的，最初它按预期工作。我在 header 下面得到一条灰色的实线，它覆盖了我在平面列表上滚动的所有内容。它发生在 Android 和 iOS.

上

react-native: 0.50.3
native-base：5.3.0

我这样声明 header：

<View style={[styles.content,StyleSheet.absoluteFill]}>
    <StatusBar hidden={false} />
    <StyleProvider style={getTheme(commonColors)}>
    <Header>
      <Left>
        <Image
          style={styles.chaskiLogo}
          source={require('../images/image.png')}
        />
      </Left>
      <Right>
          <Button disabled={this.state.loading} onPress={this.gotoFeeds.bind(this)} iconLeft transparent dark>
            <Icon style={styles.config} ios='ios-list' android="md-list"/>
          </Button>
       </Right>
    </Header>
    </StyleProvider>
    <Flatlist />
    ...
</View>

commonColors 的定义如下：

import color from "color";

import { Platform, Dimensions, PixelRatio } from "react-native";

const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const platform = Platform.OS;
const platformStyle = undefined;
const isIphoneX = platform === "ios" && deviceHeight === 812 && deviceWidth === 375;

export default {
  platformStyle,
  platform,

  // Header
  toolbarDefaultBg: "#fff",
  toolbarHeight: platform === "ios" ? (isIphoneX ? 88 : 64) : 56,
  toolbarIconSize: platform === "ios" ? 20 : 22,
  toolbarSearchIconSize: platform === "ios" ? 20 : 23,
  searchBarHeight: platform === "ios" ? 30 : 40,
  toolbarInverseBg: "#222",
  toolbarTextColor: "#fff",
  iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
  androidStatusBarColor: "#000",
  get statusBarColor() {
    return color(this.toolbarDefaultBg)
      .darken(1)
      .hex();
  },
};

更新：

样式：

const styles = StyleSheet.create({
  // content: { backgroundColor: 'rgb(235, 235, 235)'},

  chaskiLogo: {width: 116.67, height: 30},
  config: {
    fontSize: (Platform.OS === 'ios')
      ? 32
      : 24,
    color: 'black'
  },
});

Answer 1

我有一个平面列表样式的 marginTop: 5。

删除它解决了问题。

出现了一个新问题，为什么 FlatList 上的边距顶部会呈现为固定到 header。我会在另一个问题中问这个问题！谢谢

本机基础 header 下面有奇数纯色

Native base header has odd solid color below

react-native

native-base