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

在scrollview中，我遇到了同样的问题，其中很少有图像水平放置，而它们之间没有任何空间。在iOS上工作时，我没有任何问题，但是当我切换到Android时，这些白线弹出了，并且在某些滚动位置处消失了。我使用的hack添加了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>
    )