本机基本标题下面有奇数纯色

时间:2017-11-23 04:44:30

标签: react-native native-base

我正在为我的应用程序使用本机反应原生。

我最近收到此错误,不知道它何时开始发生,最初它按预期工作。我在灰色标题下方得到一条实线,这是我在平面列表上滚动的所有内容。它发生在Android和iOS上。

  • react-native:0.50.3
  • native-base:5.3.0 enter image description here

我声明这样的标题:

<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'
  },
});

1 个答案:

答案 0 :(得分:0)

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

删除它解决了这个问题。

出现了一个新问题,为什么FlatList上的边距顶部会被固定到标头上。我会问另一个问题!感谢