白线出现在反应原生的边界上

Question

我正在使用如下连续排列的三个TouchableOpacity个实例：

  <View style={styles.container}>
    <View style={styles.container}>
      <RTCView streamURL={this.state.remoteURL} style={styles.video1} />
      <RTCView streamURL={this.state.videoURL} style={styles.video2} />
    </View>
    <View style={styles.buttonContainer}>
      <TouchableOpacity style={styles.button} onPress={this.start}>
        <Text> Start </Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={this.call}>
        <Text> Call </Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={this.receive}>
        <Text> Receive </Text>
      </TouchableOpacity>
    </View>
  </View>

const styles = {
  // leaving out video1 and video2
  buttonContainer: {
    flexDirection: 'row',
    flex: 0.3,
    height: 5,
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#000'
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#000'
  },
  button: {
    borderWidth: 3,
    borderColor: '#000',
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'space-around',
    backgroundColor: '#DDDDDD'
  }
};

但是，按钮的其中一个边框有一条白线穿过它（在“呼叫”和“接收”按钮之间可见）。

iOS上仅针对模拟器和实际设备出现问题。它看起来很适合Android。

我为justifyContent尝试了不同的值，但行为仍然存在。白色线出现在不同的borderWidth值（即使是1）。我能找到的最接近的是github issue，但它会处理borderRadius。

有什么建议吗？