android - React-Native:两个 View 之间无法解释的空间(白线)

Question

我有两个 View ，一个叠在另一个上面。

模拟器中的屏幕截图:

我在手机上看到的:

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

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 时，那些白线突然出现，并且它们在某些滚动位置消失了。我使用的技巧是添加 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>
    )