React-Native：两个视图之间无法解释的空格（白线）

Question

我有两个视图一个堆叠在另一个上面。

模拟器中的屏幕截图：

我在手机上看到的内容：

从屏幕上可以看出，模拟器版本很好，但我手机上的两个视图之间有白线。代码如下：

import React, { Component } from 'react';

import {
  Text,
  View,
  StyleSheet,
} from 'react-native';

class FlightSearch extends Component {

  render() {

    return (
      <View style={styles.pageRoot}>

        <View style={styles.navSection}></View>

        <View style={styles.searchSection}>

          <View style={styles.locationSection}></View>

          <View style={styles.searchParametersSection}></View>

        </View>

      </View>
    );
  }

}


const styles = StyleSheet.create({
  pageRoot: {
    flex: 1,
    flexDirection: 'column',
  },
  navSection: {
    backgroundColor: '#368ec7',
    flex: 25,
    alignSelf: 'stretch'
  },
  searchSection: {
    flex: 75,
    alignSelf: 'stretch',
  },
  locationSection: {
    flex: 30,
    backgroundColor: '#276fa3',
    padding: 10,
    paddingLeft: 20,
    paddingRight: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#205e8c'
  },
  searchParametersSection : {
    flex: 70,
    backgroundColor: 'rgba(41,123,184,1)',
    borderTopWidth: 1,
    borderTopColor: 'rgba(69, 140, 194, 0.7)',
    flexDirection: 'column'
  }
});

export default FlightSearch;

Answer 1

我在滚动视图中遇到了同样的问题，其中很少有图像水平放置，它们之间没有任何空间。在iOS上工作时我没有遇到任何问题，但是当我切换到Android时，那些白线突然出现，并且它们在一些滚动位置消失了。我使用的黑客是添加marginRight: -1（水平图像）。

用户不会注意到差异，但这样您就可以解决问题。

return (
      <ScrollView ref='sr' style={styles.container} horizontal={true}>
        <Image source={im1} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
        <Image source={im2} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
        <Image source={im3} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
        <Image source={im4} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
        <Image source={im5} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
        <Image source={im6} style={{height: h, width: 400, resizeMode: 'stretch', marginRight: -1}} />
      </ScrollView>
    )